中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、實現邏輯

1. 當輸入框的值為空時，下面的數據項不顯示；
2. 當輸入框的值不為空時，下面的數據項顯示，且數據篩選出包含輸入框中關鍵詞的數據項；

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

二、元件搭配

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

選中【中繼器】，在樣式中，為中繼器添加默認的數據，在<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協議