我們幾乎每天都會使用到搜索功能，在使用百度的時候經常能看到在搜索框中你只要輸入部分關鍵詞，就能看到下邊列出來的候選詞，這種方法不僅能夠幫助那些無法準確定位要搜索什么詞的用戶，還提高了搜索效率和準確性。

在我們日常使用中除了搜索引擎之外的電商，內容類產品中也尤為常見，接下來就講講如何在原型中體現該效果。

先看效果：

在開始之前，先把思路梳理成流程，便于更好理解實現原理。

所有步驟主要分為兩大塊

01

在頁面中拖入一個“文本框”元件，調整大小為W:325 H:25，并命名為“搜索框”，然后在<提示文字>這一欄輸入“搜索”用作提示。

注意下這里因為我使用了已經完成的iPhoneX外殼元件，為了能夠美化效果，把文本框的“隱藏邊框”勾選上了，實際練習時可以不用，如需要元件庫可到我公眾號后臺回復“IOS11元件”獲取。

接下來在頁面中拖入一個“中繼器”放在文本框下方合適的位置，然后雙擊中繼器進入下一頁面，把頁面內的矩形調整大小為W:325 H:25，并將四周邊框取消，此處取消邊框的作用也是為了美觀。

回到默認頁面，為拖入的中繼器命名為“候選詞”，然后在<Cloumn0>這一列填充自己需要的候選詞。

2

為“搜索框”元件添加第一個用例，就如我們前邊流程梳理中所說的，若搜索框內文本改變時，需要先對文本添加判斷條件，再執行動作，所以我們為第一個用例添加一個判斷條件。

如下圖：

添加篩選動作于“候選詞”這個中繼器。

配置篩選函數，先添加一個局部變量，也就是搜索框中的文字。

先插入一個中繼器/數據集的函數<Item.Column0>。

再插入一個字符串函數<substrate(start,length)>。

最后調整函數表達如下圖所示，然后確定，篩選函數設置完畢。

此時添加顯示“候選詞”動作，表明符合篩選條件的情況下顯示中繼器內容。

然后為“文本改變時”狀態添加第二個用例，設置當判斷條件“<1時”。

隱藏“候選詞”這個中繼器。

最后，當頁面載入時，設置中繼器為“隱藏”狀態。

完成以上所有步驟，就能展現文中開頭所示的效果，最后我們總結下，從我們給元件狀態配置的用例可以看出，最基本的思路就是“篩選—呈現”。

因此基于這個思路，我們需要做的就是提供篩選數據，而中繼器是一個很好的數據容納工具，然后篩選，符合條件則呈現。不符合條件則隱藏，后續我也會寫更多關于中繼器使用的例子。

這個實現效果并不復雜，至于文中的函數部分我已經做了拆分理解，如果實在難以理解可以嘗試多去練習幾次這個效果，對于沒有寫代碼基礎的同學（我也是）是相對比較難理解。在多次練習后，就會有一定的認識，在日常中這一點并不需要做產品的同學刻意去糾結，重要的是我們能夠理解其中的思路。

也希望大家能夠養成一種習慣，在進行練習前對任務流程進行思路梳理，這樣對理解邏輯更有幫助，有任何問題歡迎在文章底部留言討論。

作者：杰森，公眾號：十八般產品

本文由 @杰森 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議