大家可能在很多網(wǎng)站的搜索欄看到這樣一個(gè)功能：輸入一個(gè)關(guān)鍵詞，在下面會(huì)出現(xiàn)一個(gè)聯(lián)想的關(guān)鍵詞列表，我們可以從列表中選擇關(guān)鍵詞進(jìn)行搜索。這個(gè)功能在電商網(wǎng)站尤其多見，常用電商網(wǎng)站的朋友應(yīng)該都不陌生。

?

最近剛好有做電商產(chǎn)品的小伙伴詢問(wèn)這個(gè)功能的交互應(yīng)該怎么做，那么我們就針對(duì)這個(gè)交互一起來(lái)看看。先看一下這個(gè)功能具體的效果是怎樣的。

這里也有預(yù)覽地址https://aurpk5.axshare.com，想自己動(dòng)手試試效果如何的小伙伴，可以自己操作一下。

?

好了，看到效果之后，話不多說(shuō)，我們直接來(lái)看看怎么做。先說(shuō)一下之前有位小伙伴的想法，是通過(guò)動(dòng)態(tài)面板，不同的關(guān)鍵詞用不同的狀態(tài)也制作。這個(gè)想法是沒錯(cuò)的，但有一點(diǎn)麻煩。就是在編輯狀態(tài)切換的條件是比較麻煩，不知道用戶輸入的是否是我們?cè)O(shè)定的條件。打個(gè)比方，關(guān)于手機(jī)的條件，如果我們?cè)O(shè)定的是“手機(jī)”二字，用戶假設(shè)輸入“華為”、“手”、“小米”等其他詞語(yǔ)，那么就不能切換到我們想要的狀態(tài)。如果要用這種方法的話，條件需要設(shè)置非常多，繁瑣。

?

這里說(shuō)一個(gè)簡(jiǎn)單一點(diǎn)的方法，可能有人已經(jīng)想到了，沒錯(cuò)，就是利用中繼器，原理就是將所有的聯(lián)想詞都用中繼器做好，然后根據(jù)關(guān)鍵詞進(jìn)行篩選。上面提到的問(wèn)題，如果簡(jiǎn)單這樣做客也是存在，但只要借助一個(gè)函數(shù)就可以輕松解決，我們稍后講。

?

首先我們先把部件元素都建好：

元素比較簡(jiǎn)單，重點(diǎn)在交互設(shè)置。設(shè)置交互我們要考慮的是，怎么樣實(shí)現(xiàn)，根據(jù)輸入的任意內(nèi)容去對(duì)我們中繼器里面的內(nèi)容做篩選。

?

這里先給大家說(shuō)一個(gè)函數(shù)，等一下我們會(huì)用到，可以提升搜索的質(zhì)量。這個(gè)函數(shù)就是index of函數(shù)。這個(gè)函數(shù)是返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，返回0代表第一個(gè)位置，返回-1代表沒有搜索到該字符。根據(jù)這個(gè)返回值，我們可以知道，當(dāng)返回的值大于-1時(shí)，指定字符在字符串中一定能搜索到，所在位置不重要。也就是說(shuō)，我們輸入的關(guān)鍵詞只要用這個(gè)函數(shù)，在中繼器的數(shù)據(jù)中搜索，它的返回值只要大于-1，我們就把包含了這個(gè)關(guān)鍵詞的內(nèi)容篩選出來(lái)。

好，假設(shè)我輸入的關(guān)鍵詞是“蘋”，就把帶“蘋”字的內(nèi)容篩選出來(lái)了

?

這里邊最主要的就是index of函數(shù)在中繼器篩選中的應(yīng)用，關(guān)鍵是理解返回值的意義，難度不大。在這個(gè)案例里邊，其他的設(shè)置大家有興趣可以在空余時(shí)間把它完善一下。比如，清空搜索框內(nèi)容，聯(lián)想列表消失；選擇列表中的內(nèi)容，會(huì)將內(nèi)容獲取到搜索框等等，這些相對(duì)比較簡(jiǎn)單，這里就不在贅述了。