在產品的體量越來越大的趨勢下，一個搜索功能似乎已經是產品功能列表里的標配了。大的搜索引起，如google、百度；小的搜索，如字符串的匹配，word里的ctrl F等。一個小小的搜索功能，可以帶給我們怎樣的思考呢？
本文承接之前的Axure中繼器教程，繼續用理論 Axure原型。探索產品背后的邏輯。
此案例主要實現以下內容：
1、根據搜索框的關鍵詞，‘篩選’包含該關鍵字的商品，跳轉商品列表頁
2、搜索時顯示‘搜索提示’，可以點擊搜索提示直接跳轉該提示詞的商品列表頁
3、在搜索頁記錄‘搜索歷史’，在搜索列表頁可以刪除對應的‘搜索歷史’
4、熱搜詞的記錄和跳轉；
先看一下效果： 原型地址
效果演示如下： 
一、搜索是什么？
電商商城里的搜索功能本質上是篩選，不同的篩選其實就是不同字段的查詢。例如，選擇價格區間，其實就是“price”這個字段增加一個上下區間范圍的條件，再將滿足條件的展示出來。而搜索也是字符之間的匹配，將滿足【已輸入】的【字符串】和商城內所有商品的商品名稱【goodsName】進行匹配，然后將滿足條件的展現出來。
搜索的作用就是讓用戶可以精確（包括模糊）地找到所想的商品。
下圖是氧氣和淘寶的搜索結果界面（一般也是【商品列表頁】）。 
二、范圍搜索
除了搜索的條件外，還有搜索的范圍。隨著商城的體量越來越大，搜索不僅僅是局限于商品的搜索，還有店鋪、用戶、文章、活動等。
下圖為聚美優品和蘑菇街的搜索界面，將搜索范圍的選項放置在搜索框上方： 
古典一些的就像淘寶wap，需要點擊搜索范圍。 
而淘寶wap端還是需要點擊“寶貝”來選擇搜索范圍。
小結：搜索本是一個復雜的過程，能讓用戶點擊，滑動等手勢完成就盡量不要輸入。在搜索范圍的分類較少時（如聚美和蘑菇街），可在搜索框上方或下放添加選項卡，比淘寶wap少一次點擊，而且展現更充分。當搜索范圍較多時，可以參考淘寶，在搜索框下放設置橫向滑動的模塊，供用戶選擇。
三、中繼器 動態面板 函數實現搜索
之前寫了中繼器的一些簡單用法，這次做一點復雜的功能吧。其實我工作中也不常用到中繼器，快速原型繪制唄。但是，用不用和你會不會，是兩碼事。
OK，廢話不多說，看此文需要有一些Axure和中繼器的基礎知識，重要的不是做出了一個效果，而是通過一段思考來完善產品里的需求。（之前的文章鏈接會放到文末。）
兩個頁面，用了六個中級器。所以我說這是轟轟烈烈的搜索。╮(╯_╰)╭
建議點開上方的原型鏈接，對應著看。 
1、點擊搜索框跳轉
關于頁面的命名：
商品列表頁：GoodsTable
搜索頁：Seach
商品列表頁的搜索框：seachText-goodslistpage
搜索頁的搜索框：SeachText-seachpage
搜索提示：prompt-repeater（輸入文本時，下面彈出的列表項，因為是中繼器，所以用了repeater）
搜索歷史：seachHistory（記錄搜素歷史） 
解釋：1、在點擊商品列表頁的搜索框時，設置頁面跳轉到搜索頁（設置sight為Search）
2、進入搜索頁時隱藏搜索提示（搜索提示只有輸入文本時才提示）
2、搜索頁的樣式設置 
這是搜索頁的樣式，【搜索發現】和【歷史搜索】分別是兩個動態面板套著中級器。
1）搜索發現（請自動忽略圖中文字....） 
這是中繼器的基礎用法，熟練一點的話比一個一個copy要快。而且裝逼能裝圓一點。這個是固定不動的項，需要修改的話，可以直接在中繼器的數據集里修改。
熱搜詞（搜索發現）是計算商城內的所有被搜詞，然后顯示出來。減少用戶手動輸入小號的時間，提醒用戶當下流行的元素。
2）歷史搜索 
歷史搜索的字段賦值和之前的一樣，這里為了展示，默認添加了“男裝”和“女裝”。
用動態面板套起來，記得給動態面板設置【自動調整為內容尺寸】，因為在后面的搜索中會不斷產生新的【歷史搜索】，會逐漸把動態面板撐大。（為了insert，即是增）
這是【歷史搜索】中繼器中給【刪除】icon增加的操作，單機【垃圾桶】時，刪除【歷史搜索】中級器中的這一行（This）。（為了delete，即是刪） 
歷史搜索：是為了記錄用戶的關注習慣，減少用戶下一次搜索時需要的時間。也是商城搜索數據的一個途徑，即商城內的熱搜詞，來源于歷史記錄的匯總。
3）搜索提示 
在搜索頁有隱藏的中繼器，這就是搜索提示。為了讓大家看清楚，所以我把這個中繼器內的樣式做得很特別。可以在上面的鏈接里嘗試輸入數據集中的文字，試試搜索提示的快感。
還是一個從數據集給頁面賦值的過程。
搜索提示是在用戶輸入時，補全用戶可能輸入的詞匯，減少用戶的輸入。
三、搜索提示的顯示
上面幾步主要是把需要的頁面樣式和數據補充齊全，也就是我之前說過的Axure的狹義MVC理論，到了這一步，V和M都有了，需要一個C。
1）顯示搜索提示 
這是給搜索框的用例，涉及到兩個函數：substr（）和length。
x.substr（start，length），釋義：從start開始截取字符串x，截取的長度為length長。
x.length：返回字符串的長度。詳情可以參看W3C。 
解釋一下這句話：加入我現在輸入【潮】字，那么就給搜索提示這個中繼器添加了一個篩選條件，這個條件很長：
如上圖的局部變量所示：我在搜索框（saechText-seachpage）中輸入了【潮】，那么局部變量LVAR1就等于【潮】。上面這一坨：[[Item.promptText.substr(0,LVAR1.length)==LVAR1]]
我來分段解釋一下：LVAR1.length就是現在LVAR1這個局部變量的長度，現在它的值是【潮】，長度就是【1】；substr(0,LVAR1.length)，就是截取字符串從0到【1】（分號前計算出來的）；那么截誰呢？就是寫在它前面的Item.promptText；截下來呢，那就對比一下是不是等于【LVAR1】（潮）。
哎喲喂。好麻煩。
換一種說法：
現在，我輸入了【潮】，就比較一下搜索提示的數據集里面第一個字是【潮】的，然后顯示出來。 
現在，我輸入【潮來】，那么就比較數據集中前兩個字是【潮來】的數據并顯示。只有【潮來了】 
（PS：最好再加一個點擊提示文字，直接跳轉該關鍵詞的搜索頁，看完你就會了）
再加上一個輸入的字符串為空，或不為空的判斷。
四、轟轟烈烈的搜索按鈕
大家都知道，輸入關鍵字后，需要點擊【搜索】，才能跳轉，所以接下來就是最后一步了。 
用例那邊很多東西，而且一個不能少，而且順序不能改，很孤獨。
挨著解釋一下：
點擊搜索后，需要給商品列表頁添加篩選條件，而這個篩選和之前的搜索提示不一樣：
1）搜索提示是按順序，一個字對應一個字，就像上面一樣，【潮來】就只有一個匹配的，加入搜索【潮來了】中的【來了】就搜索不到了。
這里的商品搜索是檢索，效果就是，當我輸入【來了】可以搜索到【潮來了】。
所以這里用到了一個函數IndexOF，用法如下：
X.indexOf(‘value’），在X里搜索（value），返回值是第一次檢索到value的位置。
例如在【潮來沒來】中搜索【沒來】，則返回2；搜索【潮】則返回0。
所以： 
再解釋一下：還是一個局部變量，然后就是這[[Item.name.indexOf(LVAR1)gt;0]]一坨。
大于零就是存在的意思。OK。
2）一次解釋一下這一坨： 
第一個：添加篩選（篩選出符合條件的項）
第二個：設置頁面返回商品列表頁（沒有這個就看不到效果了）
第三個：跳轉之后，將你搜索的內容添加到【搜索歷史】中（沒有這個就沒有數據記錄了，數據就是錢啊）
第四個：將你搜素的文本填充到商品列表頁（不然看不出來你‘搜’了啊~）
第五個：把搜索頁的搜索框內的文本清零（不然你搜了個【潮】，下次進來就會有殘留的【潮】）
OK~完成了。
最后總結一下：
1、用到了三個函數，有興趣的可以查一查，都是JS相同的函數。哦，微信小程序來的時候，你說你要學前端，學了？
2、文件中的icon都是取自iconfont的淘寶手機端，部分結構為了方便展示作了修改，但不影響整體，希望見諒
3、一點小體會吧，只是一個小小的搜索功能，不管做沒做出來，其實都不重要。在這個案例中，我們用了兩種字符串的匹配方式（截取的檢索），搜索提示，搜索歷史，熱門搜索，中繼器的增（歷史記錄）刪（垃圾桶）和篩選，重要的是對搜索的認知有更進了一步。
4、為什么叫轟轟烈類？因為這是我寫得最長最累的一篇了。。。
5、祝大家國慶節玩得開心。
Tags: Axure
文章來源：http://www.chanpin100.com/article/101380