本文承接之前的Axure中繼器教程，繼續(xù)用理論+Axure原型實(shí)現(xiàn)。思考產(chǎn)品設(shè)計(jì)背后的是需求。

此案例主要實(shí)現(xiàn)以下內(nèi)容：

1、根據(jù)搜索框的關(guān)鍵詞，‘篩選’包含該關(guān)鍵字的商品，跳轉(zhuǎn)商品列表頁(yè)
2、搜索時(shí)顯示‘搜索提示’，可以點(diǎn)擊搜索提示直接跳轉(zhuǎn)該提示詞的商品列表頁(yè)
3、在搜索頁(yè)記錄‘搜索歷史’，在搜索列表頁(yè)可以刪除對(duì)應(yīng)的‘搜索歷史’
4、熱搜詞的記錄和跳轉(zhuǎn)；

效果演示如下：

一、搜索是什么？
電商商城里的搜索功能本質(zhì)上是篩選，不同的篩選其實(shí)就是不同字段的查詢。例如，選擇價(jià)格區(qū)間，其實(shí)就是“price”這個(gè)字段增加一個(gè)上下區(qū)間范圍的條件，再將滿足條件的展示出來(lái)。而搜索也是字符之間的匹配，將滿足【已輸入】的【字符串】和商城內(nèi)所有商品的商品名稱【goodsName】進(jìn)行匹配，然后將滿足條件的展現(xiàn)出來(lái)。

搜索的作用就是讓用戶可以精確（包括模糊）地找到所想的商品。

下圖是氧氣和淘寶的搜索結(jié)果界面（一般也是【商品列表頁(yè)】）。

二、范圍搜索
除了搜索的條件外，還有搜索的范圍。隨著商城的體量越來(lái)越大，搜索不僅僅是局限于商品的搜索，還有店鋪、用戶、文章、活動(dòng)等。

下圖為聚美優(yōu)品和蘑菇街的搜索界面，將搜索范圍的選項(xiàng)放置在搜索框上方：

古典一些的就像淘寶wap，需要點(diǎn)擊搜索范圍。

而淘寶wap端還是需要點(diǎn)擊“寶貝”來(lái)選擇搜索范圍。

小結(jié)：搜索本是一個(gè)復(fù)雜的過(guò)程，能讓用戶點(diǎn)擊，滑動(dòng)等手勢(shì)完成就盡量不要使用輸入。在搜索范圍的分類較少時(shí)（如聚美和蘑菇街），可在搜索框上方或下放添加選項(xiàng)卡，這樣可以比淘寶wap少一次點(diǎn)擊，而且對(duì)于搜索的分類展現(xiàn)得更為充分。當(dāng)搜索范圍較多時(shí)，可以參考淘寶，在搜索框下放設(shè)置橫向滑動(dòng)的模塊，供用戶選擇。

三、中繼器+動(dòng)態(tài)面板+函數(shù)實(shí)現(xiàn)搜索

之前寫了中繼器的一些簡(jiǎn)單用法，這次做一點(diǎn)復(fù)雜的功能吧。其實(shí)我工作中也不常用到中繼器，快速原型繪制唄。但是，用不用和你會(huì)不會(huì)，是兩碼事。

OK，廢話不多說(shuō)，看此文需要有一些Axure和中繼器的基礎(chǔ)知識(shí)，重要的不是做出了一個(gè)效果，而是通過(guò)一段思考來(lái)完善產(chǎn)品里的需求。（之前的文章鏈接會(huì)放到文末。）

兩個(gè)頁(yè)面，用了六個(gè)中繼器。所以我說(shuō)這是轟轟烈烈的搜索。╮(╯_╰)╭

建議點(diǎn)開上方的原型鏈接，對(duì)應(yīng)著看。

1、點(diǎn)擊搜索框跳轉(zhuǎn)

關(guān)于頁(yè)面的命名：

商品列表頁(yè)：GoodsTable

搜索頁(yè)：Seach

商品列表頁(yè)的搜索框：seachText-goodslistpage

搜索頁(yè)的搜索框：SeachText-seachpage

搜索提示：prompt-repeater（輸入文本時(shí)，下面彈出的列表項(xiàng)，因?yàn)槭侵欣^器，所以用了repeater）

搜索歷史：seachHistory（記錄搜素歷史）

解釋：1、在點(diǎn)擊商品列表頁(yè)的搜索框時(shí)，設(shè)置頁(yè)面跳轉(zhuǎn)到搜索頁(yè)（設(shè)置sight為Search）

2、進(jìn)入搜索頁(yè)時(shí)隱藏搜索提示（搜索提示只有輸入文本時(shí)才提示）

2、搜索頁(yè)的樣式設(shè)置

這是搜索頁(yè)的樣式，【搜索發(fā)現(xiàn)】和【歷史搜索】分別是兩個(gè)動(dòng)態(tài)面板套著中繼器。

1）搜索發(fā)現(xiàn)（請(qǐng)自動(dòng)忽略圖中文字….）

這是中繼器的基礎(chǔ)用法，熟練一點(diǎn)的話比一個(gè)一個(gè)copy要快。而且裝逼能裝圓一點(diǎn)。這個(gè)是固定不動(dòng)的項(xiàng)，需要修改的話，可以直接在中繼器的數(shù)據(jù)集里修改。

熱搜詞（搜索發(fā)現(xiàn)）是計(jì)算商城內(nèi)的所有被搜詞，然后顯示出來(lái)。減少用戶手動(dòng)輸入小號(hào)的時(shí)間，提醒用戶當(dāng)下流行的元素。

2）歷史搜索

歷史搜索的字段賦值和之前的一樣，這里為了展示，默認(rèn)添加了“男裝”和“女裝”。

用動(dòng)態(tài)面板套起來(lái)，記得給動(dòng)態(tài)面板設(shè)置【自動(dòng)調(diào)整為內(nèi)容尺寸】，因?yàn)樵诤竺娴乃阉髦袝?huì)不斷產(chǎn)生新的【歷史搜索】，會(huì)逐漸把動(dòng)態(tài)面板撐大。（為了insert，即是增）

這是【歷史搜索】中繼器中給【刪除】icon增加的操作，單機(jī)【垃圾桶】時(shí)，刪除【歷史搜索】中繼器中的這一行（This）。（為了delete，即是刪）

歷史搜索：是為了記錄用戶的關(guān)注習(xí)慣，減少用戶下一次搜索時(shí)需要的時(shí)間。也是商城搜索數(shù)據(jù)的一個(gè)途徑，即商城內(nèi)的熱搜詞，來(lái)源于歷史記錄的匯總。

3）搜索提示

在搜索頁(yè)有隱藏的中繼器，這就是搜索提示。為了讓大家看清楚，所以我把這個(gè)中繼器內(nèi)的樣式做得很特別。可以在上面的鏈接里嘗試輸入數(shù)據(jù)集中的文字，試試搜索提示的快感。

還是一個(gè)從數(shù)據(jù)集給頁(yè)面賦值的過(guò)程。

搜索提示是在用戶輸入時(shí)，補(bǔ)全用戶可能將會(huì)輸入的詞匯，減少用戶的輸入操作。

四、搜索提示的顯示

上面幾步主要是把需要的頁(yè)面樣式和數(shù)據(jù)補(bǔ)充齊全，也就是我之前說(shuō)過(guò)的Axure的狹義MVC理論（哈哈哈），到了這一步，V和M都有了，需要一個(gè)C。

1）顯示搜索提示

這是給搜索框的用例，涉及到兩個(gè)函數(shù)：substr（）和length。

x.substr（start，length），釋義：從start開始截取字符串x，截取的長(zhǎng)度為length長(zhǎng)。

x.length：返回字符串的長(zhǎng)度。詳情可以參看W3C。

解釋一下這句話：加入我現(xiàn)在輸入【潮】字，那么就給搜索提示這個(gè)中繼器添加了一個(gè)篩選條件，這個(gè)條件很長(zhǎng)：

如上圖的局部變量所示：我在搜索框（saechText-seachpage）中輸入了【潮】，那么局部變量LVAR1就等于【潮】。上面這一坨：[[Item.promptText.substr(0,LVAR1.length)==LVAR1]]

我來(lái)分段解釋一下：LVAR1.length就是現(xiàn)在LVAR1這個(gè)局部變量的長(zhǎng)度，現(xiàn)在它的值是【潮】，長(zhǎng)度就是【1】；substr(0,LVAR1.length)，就是截取字符串從0到【1】（分號(hào)前計(jì)算出來(lái)的）；那么截誰(shuí)呢？就是寫在它前面的Item.promptText；截下來(lái)呢，那就對(duì)比一下是不是等于【LVAR1】（潮）。

哎喲喂。好麻煩。

換一種說(shuō)法：

現(xiàn)在，我輸入了【潮】，就比較一下搜索提示的數(shù)據(jù)集里面第一個(gè)字是【潮】的，然后顯示出來(lái)。

現(xiàn)在，我輸入【潮來(lái)】，那么就比較數(shù)據(jù)集中前兩個(gè)字是【潮來(lái)】的數(shù)據(jù)并顯示。只有【潮來(lái)了】

（PS：最好再加一個(gè)點(diǎn)擊提示文字，直接跳轉(zhuǎn)該關(guān)鍵詞的搜索頁(yè)，看完你就會(huì)了）

再加上一個(gè)輸入的字符串為空，或不為空的判斷。

五、轟轟烈烈的搜索按鈕

大家都知道，輸入關(guān)鍵字后，需要點(diǎn)擊【搜索】，才能跳轉(zhuǎn)，所以接下來(lái)就是最后一步了。

用例那邊很多東西，而且一個(gè)不能少，而且順序不能改，很孤獨(dú)。

挨著解釋一下：

點(diǎn)擊搜索后，需要給商品列表頁(yè)添加篩選條件，而這個(gè)篩選和之前的搜索提示不一樣：

1）搜索提示是按順序，一個(gè)字對(duì)應(yīng)一個(gè)字，就像上面一樣，【潮來(lái)】就只有一個(gè)匹配的，加入搜索【潮來(lái)了】中的【來(lái)了】就搜索不到了。

這里的商品搜索是檢索，效果就是，當(dāng)我輸入【來(lái)了】可以搜索到【潮來(lái)了】。

所以這里用到了一個(gè)函數(shù)IndexOF，用法如下：

X.indexOf(‘value’），在X里搜索（value），返回值是第一次檢索到value的位置。

例如在【潮來(lái)沒(méi)來(lái)】中搜索【沒(méi)來(lái)】，則返回2；搜索【潮】則返回0。

所以：

再解釋一下：還是一個(gè)局部變量，然后就是這[[Item.name.indexOf(LVAR1)>0]]一坨。

大于零就是存在的意思。OK。

2）一次解釋一下右邊這一坨：

第一個(gè)：添加篩選（篩選出符合條件的項(xiàng)）

第二個(gè)：設(shè)置頁(yè)面返回商品列表頁(yè)（沒(méi)有這個(gè)就看不到效果了）

第三個(gè)：跳轉(zhuǎn)之后，將你搜索的內(nèi)容添加到【搜索歷史】中（沒(méi)有這個(gè)就沒(méi)有數(shù)據(jù)記錄了，數(shù)據(jù)就是錢?。?/p>

第四個(gè)：將你搜素的文本填充到商品列表頁(yè)（不然看不出來(lái)你‘搜’了啊~）

第五個(gè)：把搜索頁(yè)的搜索框內(nèi)的文本清零（不然你搜了個(gè)【潮】，下次進(jìn)來(lái)就會(huì)有殘留的【潮】）

OK~完成了。

最后總結(jié)一下：

1、用到了三個(gè)函數(shù)，有興趣的可以查一查，都是JS相同的函數(shù)。哦，微信小程序來(lái)的時(shí)候，你說(shuō)你要學(xué)前端，學(xué)了？

2、文件中的icon都是取自iconfont的淘寶手機(jī)端，部分結(jié)構(gòu)為了方便展示作了修改，但不影響整體，希望見(jiàn)諒

3、一點(diǎn)小體會(huì)吧，只是一個(gè)小小的搜索功能，不管做沒(méi)做出來(lái)，其實(shí)都不重要。在這個(gè)案例中，我們用了兩種字符串的匹配方式（截取和檢索），搜索提示，搜索歷史，熱門搜索，中繼器的增（歷史記錄）刪（垃圾桶）和篩選，重要的是對(duì)搜索的認(rèn)知有更進(jìn)了一步。

4、為什么叫轟轟烈類？因?yàn)檫@是我寫得最長(zhǎng)最累的一篇了。

5、祝大家國(guó)慶節(jié)玩得開心。

本文由 @浩程君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。