我們幾乎每天都會使用到搜索功能，在使用百度的時候經常能看到在搜索框中你只要輸入部分關鍵詞，就能看到下邊列出來的候選詞，這種方法不僅能夠幫助那些無法準確定位要搜索什麼詞的用戶，還提高了搜索效率和準確性。
在我們日常使用中除了搜索引擎之外的電商，內容類產品中也尤為常見，接下來就講講如何在原型中體現該效果。
先看效果：
在開始之前，先把思路梳理成流程，便於更好理解實現原理。
所有步驟主要分為兩大塊
01
在頁面中拖入一個“文本框”元件，調整大小為W:325 H:25，並命名為“搜索框”，然後在這一欄輸入“搜索”用作提示。
注意下這裡因為我使用了已經完成的iPhoneX外殼元件，為了能夠美化效果，把文本框的“隱藏邊框”勾選上了，實際練習時可以不用，如需要元件庫可到我公眾號後臺回覆“IOS11元件”獲取。
接下來在頁面中拖入一個“
中繼器”放在文本框下方合適的位置，然後雙擊中繼器進入下一頁面，把頁面內的矩形調整大小為W:325 H:25，並將四周邊框取消，此處取消邊框的作用也是為了美觀。
回到默認頁面，為拖入的中繼器命名為“候選詞”，然後在
2
為“搜索框”元件添加第一個用例，就如我們前邊流程梳理中所說的，若搜索框內文本改變時，需要先對文本添加判斷條件，再執行動作，所以我們為第一個用例添加一個判斷條件。
如下圖：
添加篩選動作於“候選詞”這個中繼器。
配置篩選函數，先添加一個局部變量，也就是搜索框中的文字。
先插入一箇中繼器/數據集的函數<Item.Column0>。
再插入一個字符串函數<substrate(start,length)>。
最後調整函數表達如下圖所示，然後確定，篩選函數設置完畢。
此時添加顯示“候選詞”動作，表明符合篩選條件的情況下顯示中繼器內容。
然後為“文本改變時”狀態添加第二個用例，設置當判斷條件“<1時”。
隱藏“候選詞”這個中繼器。
最後，當頁面載入時，設置中繼器為“隱藏”狀態。
完成以上所有步驟，就能展現文中開頭所示的效果，最後我們總結下，從我們給元件狀態配置的用例可以看出，最基本的思路就是“篩選—呈現”。
因此基於這個思路，我們需要做的就是提供篩選數據，而中繼器是一個很好的數據容納工具，然後篩選，符合條件則呈現。不符合條件則隱藏，後續我也會寫更多關於中繼器使用的例子。
這個實現效果並不複雜，至於文中的函數部分我已經做了拆分理解，如果實在難以理解可以嘗試多去練習幾次這個效果，對於沒有寫代碼基礎的同學（我也是）是相對比較難理解。在多次練習後，就會有一定的認識，在日常中這一點並不需要做產品的同學刻意去糾結，重要的是我們能夠理解其中的思路。
也希望大家能夠養成一種習慣，在進行練習前對任務流程進行思路梳理，這樣對理解邏輯更有幫助，有任何問題歡迎在文章底部留言討論。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
