Axure9 使用中繼器實現模糊查詢搜索

最近完善產品的元件庫,剛好遇到需要用中繼器實現查詢搜索功能。

要求實現的效果也很簡單:如下圖,我想根據輸入框內文本內容改變時,中繼器的C1列按照輸入框當前的文本內容,模糊查詢結果並顯示結果。

接下來就是如何實現:

1.給輸入框添加交互“文本改變時”,選擇中繼器的“添加篩選”動作;

2.選擇目標中繼器,給篩選取個好辨認的名字,勾選“移除其他選項”,然後點擊fx開始寫規則;

3.這裏我們需要獲取文本輸入框的輸入內容,所以先建一個局部變量LVAR1,取值是文本輸入框的的文本內容;

4.在文本框內輸入規則:[[Item.C1.indexOf(LVAR1)>-1]],點擊確定,完成動作編寫,預覽一下就可以查看效果。

這句規則的組成:

①Item.C1:不難理解是操作目標,指明要在中繼器的哪一列進行;

②indexOf(LAVR1):indexOf('searchValue')是Axure自帶的字符串函數,函數定義是返回查找的字符串第一次出現的位置,如果未找到則返回爲-1,這裏我們將局部變量LVAR1作爲參數傳入;

③>-1:因爲字符串下標是從0開始,這時我們將局部變量LVAR1作爲參數(查找的字符串)傳入,與中繼器C1列的每個數據做比對,如果某個數據返回值大於-1,如0、1、2等,表明這個數據內包含了參數,應該作爲結果篩選出來,反之如果某個數據返回值等於-1,表明未找到參數,按我們的效果要求應該剔除

********************************************************************

效果預覽:

效果
效果

********************************************************************

額外話題1:這一次輸入框效果再加一個要求,如果文本內容變爲空,要求顯示所有數據,這樣如何實現呢?

比較簡單的方法,給輸入框的交互“文本改變”時添加一種情形:如果輸入框文本內容是空,則移除中繼器的全部篩選條件

額外話題2:如果我想一個輸入框模糊搜索中繼器的不同列,該怎麼做?

這裏的話可以用到布爾運算的與或符,還可以用到運算數學符號+,如果兩列之間用到+號的話,規則末尾的-1也需要乘以2

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章