我們幾乎每天都會(huì)使用到搜索功能，在使用百度的時(shí)候經(jīng)常能看到在搜索框中你只要輸入部分關(guān)鍵詞，就能看到下邊列出來(lái)的候選詞，這種方法不僅能夠幫助那些無(wú)法準(zhǔn)確定位要搜索什么詞的用戶，還提高了搜索效率和準(zhǔn)確性。

在我們?nèi)粘Ｊ褂弥谐怂阉饕嬷獾碾娚?，?nèi)容類產(chǎn)品中也尤為常見(jiàn)，接下來(lái)就講講如何在原型中體現(xiàn)該效果。

先看效果：

在開(kāi)始之前，先把思路梳理成流程，便于更好理解實(shí)現(xiàn)原理。

所有步驟主要分為兩大塊

01

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

注意下這里因?yàn)槲沂褂昧艘呀?jīng)完成的iPhoneX外殼元件，為了能夠美化效果，把文本框的“隱藏邊框”勾選上了，實(shí)際練習(xí)時(shí)可以不用，如需要元件庫(kù)可到我公眾號(hào)后臺(tái)回復(fù)“IOS11元件”獲取。

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

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

2

為“搜索框”元件添加第一個(gè)用例，就如我們前邊流程梳理中所說(shuō)的，若搜索框內(nèi)文本改變時(shí)，需要先對(duì)文本添加判斷條件，再執(zhí)行動(dòng)作，所以我們?yōu)榈谝粋€(gè)用例添加一個(gè)判斷條件。

如下圖：

添加篩選動(dòng)作于“候選詞”這個(gè)中繼器。

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

先插入一個(gè)中繼器/數(shù)據(jù)集的函數(shù)<Item.Column0>。

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

最后調(diào)整函數(shù)表達(dá)如下圖所示，然后確定，篩選函數(shù)設(shè)置完畢。

此時(shí)添加顯示“候選詞”動(dòng)作，表明符合篩選條件的情況下顯示中繼器內(nèi)容。

然后為“文本改變時(shí)”狀態(tài)添加第二個(gè)用例，設(shè)置當(dāng)判斷條件“<1時(shí)”。

隱藏“候選詞”這個(gè)中繼器。

最后，當(dāng)頁(yè)面載入時(shí)，設(shè)置中繼器為“隱藏”狀態(tài)。

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

因此基于這個(gè)思路，我們需要做的就是提供篩選數(shù)據(jù)，而中繼器是一個(gè)很好的數(shù)據(jù)容納工具，然后篩選，符合條件則呈現(xiàn)。不符合條件則隱藏，后續(xù)我也會(huì)寫更多關(guān)于中繼器使用的例子。

這個(gè)實(shí)現(xiàn)效果并不復(fù)雜，至于文中的函數(shù)部分我已經(jīng)做了拆分理解，如果實(shí)在難以理解可以嘗試多去練習(xí)幾次這個(gè)效果，對(duì)于沒(méi)有寫代碼基礎(chǔ)的同學(xué)（我也是）是相對(duì)比較難理解。在多次練習(xí)后，就會(huì)有一定的認(rèn)識(shí)，在日常中這一點(diǎn)并不需要做產(chǎn)品的同學(xué)刻意去糾結(jié)，重要的是我們能夠理解其中的思路。

也希望大家能夠養(yǎng)成一種習(xí)慣，在進(jìn)行練習(xí)前對(duì)任務(wù)流程進(jìn)行思路梳理，這樣對(duì)理解邏輯更有幫助，有任何問(wèn)題歡迎在文章底部留言討論。

作者：杰森，公眾號(hào)：十八般產(chǎn)品

本文由 @杰森 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議