在開發(fā)原型的時(shí)候，經(jīng)常會遇到?jīng)]有后臺和數(shù)據(jù)庫的情況。但是我們?nèi)匀幌Ｍ軌蛳蚩蛻糁庇^地展示聯(lián)想輸入的功能。那么我們應(yīng)該如何制作呢？本文將介紹一種利用前端技術(shù)實(shí)現(xiàn)聯(lián)想輸入的方法。 引入jQuery庫

在開發(fā)原型的時(shí)候，經(jīng)常會遇到?jīng)]有后臺和數(shù)據(jù)庫的情況。但是我們?nèi)匀幌Ｍ軌蛳蚩蛻糁庇^地展示聯(lián)想輸入的功能。那么我們應(yīng)該如何制作呢？本文將介紹一種利用前端技術(shù)實(shí)現(xiàn)聯(lián)想輸入的方法。

引入jQuery庫

由于本方法使用了jQuery庫，所以首先需要在頁面中引入jQuery庫。

定義數(shù)據(jù)數(shù)組

為了模擬數(shù)據(jù)庫，我們需要定義一個(gè)數(shù)據(jù)數(shù)組來存儲聯(lián)想的內(nèi)容。可以根據(jù)實(shí)際需求自行定義數(shù)據(jù)內(nèi)容。

創(chuàng)建輸入框和顯示區(qū)域

在頁面中創(chuàng)建一個(gè)input輸入框和一個(gè)用來顯示聯(lián)想值的div。這兩個(gè)元素將是本方法的核心。

設(shè)置顯示位置和樣式

通過設(shè)置CSS樣式，使得顯示div總是處于輸入框的下方，并且不會因?yàn)闃邮降淖兓a(chǎn)生混亂。

封裝子dom并添加點(diǎn)擊事件

在循環(huán)過程中，將符合條件的值封裝成一個(gè)子dom，并添加到顯示div中。同時(shí)還為每個(gè)子dom增加了點(diǎn)擊事件，當(dāng)點(diǎn)擊子dom時(shí)，將選擇的值賦值給輸入框。

循環(huán)匹配并篩選數(shù)據(jù)

在循環(huán)過程中，將數(shù)組中的每個(gè)元素與輸入框中的值進(jìn)行匹配，篩選出符合條件的值。這個(gè)步驟非常關(guān)鍵，它決定了聯(lián)想輸入的效果。

完整的展示方法

本文提供的方法是基于前端實(shí)現(xiàn)的，如果有后臺的情況下，只需要將其中的循環(huán)比較方法改為ajax請求，循環(huán)處理后臺傳來的數(shù)據(jù)即可。