axure商城

Axure9教程:如何實現淘寶模糊搜索框?

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

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

1、當輸入框的值為空時,下面的數據項不顯示;

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

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

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

選中【中繼器】,在樣式中,為中繼器添加默認的數據,在這一列填充自己想要的數據項。

1. 選中【輸入框】,添加【文本改變時】的交互事件。需要先對文本添加判斷條件,再執行動作,即當輸入框的文字長度大于等于1時,執行動作,條件設置如下:

2. 設置條件滿足時,顯示下面的數據【中繼器】,如下圖所示:

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

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

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

函數的意思為:在中繼器中查詢文本框中文字出現的位置,也就是說,凡是能返回數字的條目,表示都是包含文本框文字的。當查詢不到文本框文字時,返回值為-1(負1),即不包含查詢的關鍵字。

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

這樣出現的模糊查詢的結果是,只要包含輸入框關鍵詞的任意一個字,模糊查詢的選項都會被列出來。如下圖所示:

4. 接下來只需要添加另一個情形結果2。其條件設置為【否則如果真】,動作為:隱藏【數據中繼器】。如下圖所示:

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

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

第38期 Axure必備入門知識

2020-4-20 11:03:58

基礎教程

Axure RP 9 訂閱版授權激活教程

2020-8-11 16:59:32

axure商城
4 條回復 A文章作者 M管理員
  1. 楓林

    ( ̄▽ ̄”) 老師,最后的否則如果真是怎么加的啊?我只能自己設置<1來實現,但是明顯和您做的不一樣?

    • 灰104812

      新添加case啥都不寫就是

  2. beAst

    感謝老師

?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo