起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識玩轉Axure：如何實現搜索框聯想詞效果
我們幾乎每天都會使用到搜索功能，在使用百度的時候經常能看到在搜索框中你只要輸入部分關鍵詞，就能看到下邊列出來的候選詞，這種方法不僅能夠幫助那些無法準確定位要搜索什么詞的用戶，還提高了搜索效率和準確性。
在我們日常使用中除了搜索引擎之外的電商，內容類產品中也尤為常見，接下來就講講如何在原型中體現該效果。
先看效果：
在開始之前，先把思路梳理成流程，便于更好理解實現原理。
所有步驟主要分為兩大塊
01
在頁面中拖入一個“文本框”元件，調整大小為W:325 H:25，并命名為“搜索框”，然后在<提示文字>這一欄輸入“搜索”用作提示。
注意下這里因為我使用了已經完成的iPhoneX外殼元件，為了能夠美化效果，把文本框的“隱藏邊框”勾選上了，實際練習時可以不用，如需要元件庫可到我公眾號后臺回復“IOS11元件”獲取。
接下來在頁面中拖入一個“中繼器”放在文本框下方合適的位置，然后雙擊中繼器進入下一頁面，把頁面內的矩形調整大小為W:325 H:25，并將四周邊框取消，此處取消邊框的作用也是為了美觀。
回到默認頁面，為拖入的中繼器命名為“候選詞”，然后在<Cloumn0>這一列填充自己需要的候選詞。
2
為“搜索框”元件添加第一個用例，就如我們前邊流程梳理中所說的，若搜索框內文本改變時，需要先對文本添加判斷條件，再執行動作，所以我們為第一個用例添加一個判斷條件。
如下圖：
添加篩選動作于“候選詞”這個中繼器。
配置篩選函數，先添加一個局部變量，也就是搜索框中的文字。
先插入一個中繼器/數據集的函數<Item.Column0>。
再插入一個字符串函數<substrate(start,length)>。
最后調整函數表達如下圖所示，然后確定，篩選函數設置完畢。
此時添加顯示“候選詞”動作，表明符合篩選條件的情況下顯示中繼器內容。
然后為“文本改變時”狀態添加第二個用例，設置當判斷條件“<1時”。
隱藏“候選詞”這個中繼器。
最后，當頁面載入時，設置中繼器為“隱藏”狀態。
完成以上所有步驟，就能展現文中開頭所示的效果，最后我們總結下，從我們給元件狀態配置的用例可以看出，最基本的思路就是“篩選—呈現”。
因此基于這個思路，我們需要做的就是提供篩選數據，而中繼器是一個很好的數據容納工具，然后篩選，符合條件則呈現。不符合條件則隱藏，后續我也會寫更多關于中繼器使用的例子。
這個實現效果并不復雜，至于文中的函數部分我已經做了拆分理解，如果實在難以理解可以嘗試多去練習幾次這個效果，對于沒有寫代碼基礎的同學（我也是）是相對比較難理解。在多次練習后，就會有一定的認識，在日常中這一點并不需要做產品的同學刻意去糾結，重要的是我們能夠理解其中的思路。
也希望大家能夠養成一種習慣，在進行練習前對任務流程進行思路梳理，這樣對理解邏輯更有幫助，有任何問題歡迎在文章底部留言討論。
作者：杰森，公眾號：十八般產品
本文由 @杰森 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
老師的微信公眾號多少？
直接搜索“十八般產品”
您好，我有個疑問，看那個函數的意思是，我們這里是按文字長度篩選的，不是按文本字體進行匹配的嗎？不知道我有沒有表達清楚我的意思，希望能理解??
你理解的沒錯，所以有另外一位大佬補充了另外的函數使用方法，可以把這里的都當成思路
中繼器是axure的最高入門了，很少使用到。。。
是的，可以了解
發現人人都是產品經理網頁端跟App端中作者回復別人的評論是不同步的呀。。。
好吧，是延遲的問題 ??
用substr(start,length)這個函數為中繼器建立篩序有限制，因為案例中設定star為0，即限定是從首位字符開始匹配，如果首位字符不同，后面就不會被篩選。
比如用戶要查找周杰倫，同類項中有周杰、周星馳、杰克，用這個函數進行查詢時，當輸入“周”時，下方的中繼器才能顯示模糊查詢的結果，會出現周杰倫、周杰、周星馳三個模糊選項。但是如果只是輸入“杰”字或“倫”，下方就沒有模糊查詢的結果。
建議采用indexOf(‘searchValue’)這個參數，將篩選函數寫為[[Item.Column0.indexOf(LVAR1)!=-1]]
函數的意思為，在中繼器中查詢文本框中文字出現的位置，也就是說，凡是能返回數字的條目，表示都是包含文本框文字的
當查詢不到文本框文字時，返回值為-1（負1），即不包含查詢的關鍵字
LVAR1局部變量為文本框元件文字
!=-1的意思是即排除不包含查詢的關鍵字的數據
這樣出現的模糊查詢的結果是，如果要查詢周杰倫，不論先輸入哪個字或一共輸入幾個字，只要包含周、杰、倫，任意一個字，模糊查詢的選項都會被列出來。
漂亮！感謝這位大佬的拓展，有興趣的伙伴可以嘗試練習下
漂亮！感謝這位大佬的拓展，有興趣的伙伴可以實操一下
嗯嗯，我剛才試了一下，效果很好，謝謝分享
大佬666
謝謝大神分享，另外，改用函數過程中indexOf(‘searchValue’)，直接在單引號內粘貼了變量名，所以預覽一直沒效果，后來仔細看了幾次才發現[[Item.Column0.indexOf(LVAR1)!=-1]]LVAR1不需要單引號，初學者留個腳印。