提到淘寶的搜索，大家都能想到在這個搜索框輸入關(guān)鍵詞后出現(xiàn)的一系列聯(lián)想詞。那么這種效果如何通過Axure做出來呢？又有哪些要點呢？

我們每天都在使用淘寶的搜索功能來篩選定位自己想要的商品，只需要輸入一個關(guān)鍵詞，就能模糊搜索到包含此關(guān)鍵詞的所有商品。今天將為大家講解如何在原型中體現(xiàn)該效果。案例效果如下：

一、實現(xiàn)邏輯

1. 當(dāng)輸入框的值為空時，下面的數(shù)據(jù)項不顯示；
2. 當(dāng)輸入框的值不為空時，下面的數(shù)據(jù)項顯示，且數(shù)據(jù)篩選出包含輸入框中關(guān)鍵詞的數(shù)據(jù)項；

根據(jù)上面的邏輯，需要用到函數(shù)[[LVAR.indexOf(‘searchValue’)]]，對函數(shù)進行篩選。

二、元件搭配

在元件庫中拉入一個【輸入框】作為搜索輸入框和一個【中繼器】作為數(shù)據(jù)展示，如下所示：

選中【中繼器】，在樣式中，為中繼器添加默認的數(shù)據(jù)，在<Cloumn0>這一列填充自己想要的數(shù)據(jù)項。

三、交互實現(xiàn)

1. 選中【輸入框】，添加【文本改變時】的交互事件。需要先對文本添加判斷條件，再執(zhí)行動作，即當(dāng)輸入框的文字長度大于等于1時，執(zhí)行動作，條件設(shè)置如下：

2. 設(shè)置條件滿足時，顯示下面的數(shù)據(jù)【中繼器】，如下圖所示：

3. 對數(shù)據(jù)【中繼器】中的數(shù)據(jù)項進行篩選，主要利用函數(shù)[[LVAR.indexOf(‘searchValue’)]]，設(shè)置如下圖所示：

1）首先點擊上圖【規(guī)則】輸入框旁的【fx】，配置篩選函數(shù)，為其先添加一個局部變量，即搜索框中的文字。

2）插入變量或函數(shù)為[[Item.Column0.indexOf(LVAR1)!=-1]]。

函數(shù)的意思為：在中繼器中查詢文本框中文字出現(xiàn)的位置，也就是說，凡是能返回數(shù)字的條目，表示都是包含文本框文字的。當(dāng)查詢不到文本框文字時，返回值為-1（負1），即不包含查詢的關(guān)鍵字。

其中 Item.Column0代表中繼器中的數(shù)據(jù)項。LVAR1代表局部變量為文本框元件文字。!=-1的意思是即排除不包含查詢的關(guān)鍵字的數(shù)據(jù)。

這樣出現(xiàn)的模糊查詢的結(jié)果是，只要包含輸入框關(guān)鍵詞的任意一個字，模糊查詢的選項都會被列出來。

如下圖所示：

4. 接下來只需要添加另一個情形結(jié)果2。其條件設(shè)置為【否則如果真】，動作為：隱藏【數(shù)據(jù)中繼器】。如下圖所示：

四、最終效果如下

中繼器在原型制作中對數(shù)據(jù)的篩選是一個不錯的元件，大家可以多嘗試使用，有任何問題歡迎在文章底部留言討論。源文件可以在公眾號中留言獲取。

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

題圖來自Unsplash，基于CC0協(xié)議