最近完善產品的元件庫,剛好遇到需要用中繼器實現查詢搜索功能。
要求實現的效果也很簡單:如下圖,我想根據輸入框內文本內容改變時,中繼器的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