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

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

一、實(shí)現(xiàn)邏輯

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

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

二、元件搭配

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

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

三、交互實(shí)現(xiàn)

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

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

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

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

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

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

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

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

如下圖所示：

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

四、最終效果如下

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

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

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