提到淘寶的搜索，大家都能想到在這個搜索框輸入關鍵詞後出現的一系列聯想詞。那麼這種效果如何通過Axure做出來呢？又有哪些要點呢？
我們每天都在使用淘寶的搜索功能來篩選定位自己想要的商品，只需要輸入一個關鍵詞，就能模糊搜索到包含此關鍵詞的所有商品。今天將為大家講解如何在原型中體現該效果。案例效果如下：
一、實現邏輯
- 當輸入框的值為空時，下面的數據項不顯示；
- 當輸入框的值不為空時，下面的數據項顯示，且數據篩選出包含輸入框中關鍵詞的數據項；
根據上面的邏輯，需要用到函數[[LVAR.indexOf(‘searchValue’)]]，對函數進行篩選。
二、元件搭配
在元件庫中拉入一個【輸入框】作為搜索輸入框和一個【中繼器】作為數據展示，如下所示：
選中【中繼器】，在樣式中，為中繼器添加默認的數據，在<cloumn0>這一列填充自己想要的數據項。/<cloumn0>
三、交互實現
1. 選中【輸入框】，添加【文本改變時】的交互事件。需要先對文本添加判斷條件，再執行動作，即當輸入框的文字長度大於等於1時，執行動作，條件設置如下：
2. 設置條件滿足時，顯示下面的數據【中繼器】，如下圖所示：
3. 對數據【中繼器】中的數據項進行篩選，主要利用函數[[LVAR.indexOf(‘searchValue’)]]，設置如下圖所示：
1）首先點擊上圖【規則】輸入框旁的【fx】，配置篩選函數，為其先添加一個局部變量，即搜索框中的文字。
2）插入變量或函數為[[Item.Column0.indexOf(LVAR1)!=-1]]。
函數的意思為：在中繼器中查詢文本框中文字出現的位置，也就是說，凡是能返回數字的條目，表示都是包含文本框文字的。當查詢不到文本框文字時，返回值為-1（負1），即不包含查詢的關鍵字。
其中 Item.Column0代表中繼器中的數據項。LVAR1代表局部變量為文本框元件文字。!=-1的意思是即排除不包含查詢的關鍵字的數據。
這樣出現的模糊查詢的結果是，只要包含輸入框關鍵詞的任意一個字，模糊查詢的選項都會被列出來。
如下圖所示：
4. 接下來只需要添加另一個情形結果2。其條件設置為【否則如果真】，動作為：隱藏【數據中繼器】。如下圖所示：
四、最終效果如下
中繼器在原型製作中對數據的篩選是一個不錯的元件，大家可以多嘗試使用，有任何問題歡迎在文章底部留言討論。源文件可以在公眾號中留言獲取。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
