自動完成的搜索框javascript實現(xiàn)

2019-01-04

編程之家

https://www.jb51.cc

編程之家收集整理的這篇文章主要介紹了自動完成的搜索框javascript實現(xiàn)，編程之家小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。

在很多需要搜索的網(wǎng)站,都會有一個自動完成的搜索框. 方便用戶查找他們想要的搜索詞. 幫助用戶快速找到自己想要的結果. 這種方式是比較友好的. 所以是比較提倡使用的.

我們這次就來實現(xiàn)這一效果. 我們通過兩篇文章來進行講解. 首先我們來完成界面的設計布局.

界面的HTML結構,第一個少不了的是一個搜索框,第二個就是搜索的點擊按鈕.

這就是最簡單的搜索框的設計. 那CSS代碼怎么處理. 以前用得多的是使用float來進行處理,然后給搜索框一個邊框,設置一個padding. 然后給按鈕去除邊框,設置一個背景. 這里我們使用flex布局方式. 這樣更簡便點. 不用考慮清除浮動效果.當然這里就要考慮兼容性問題了.

這時候我們繼續(xù)往下考慮,如果用戶輸入了關鍵詞,那就得顯示一個列表的相關詞語. 那這時候我們需要加入一個詞語列表.

比如

我們將這行代碼追加到.search的內容后面.然后設置CSS代碼,我們設置他的最小寬度為.search寬度減去搜索按鈕的寬度.這樣就跟搜索框一樣寬.

這得在CSS代碼之前,將默認的一些瀏覽器樣式清除.最后效果如下.

好了.下面我們完成JS的代碼控制.

我們來分析下,其中的事件. 用戶在輸入框輸入文字后,將輸入的文字與后臺數(shù)據(jù)做查詢,查詢到后返回給客戶端,然后將返回的數(shù)據(jù)顯示在數(shù)據(jù)列表下.

根據(jù)這個步驟,我們首先是獲取輸入框標簽,給這個標簽添加onkeyup事件

這里我們模擬一個后臺數(shù)據(jù),這里用數(shù)據(jù)來表示,然后加入一些數(shù)據(jù)

后臺數(shù)據(jù)有了,事件也添加了. 這時候我們對數(shù)據(jù)進行處理了.

首先是獲取用輸入的數(shù)據(jù),來然后與后臺數(shù)據(jù)進行比較. 然后將比較后的數(shù)據(jù)保存在一個數(shù)據(jù)里面.

var val = this.value;

//獲取輸入框里匹配的數(shù)據(jù)

var srdata = [];

for (var i = 0; i < data.length; i++) {

console.log(data[i].indexOf(val))

if (val.trim().length > 0 && data[i].indexOf(val) > -1) {

srdata.push(data[i]);

}

}

}

繼續(xù)往下分析,目前我們獲取到后臺查詢到的數(shù)據(jù)后,那就得將這個數(shù)據(jù)顯示給用戶查看,這里我們顯示在數(shù)據(jù)列表中.

var val = this.value;

//獲取輸入框里匹配的數(shù)據(jù)

var srdata = [];

for (var i = 0; i < data.length; i++) {

console.log(data[i].indexOf(val))

if (val.trim().length > 0 && data[i].indexOf(val) > -1) {

srdata.push(data[i]);

}

}

//獲取到的數(shù)據(jù)準備追加顯示,前期要做的事情: 清空數(shù)據(jù),然后顯示數(shù)據(jù)列表,如果獲取到的數(shù)據(jù)為空,則不顯示

var ele_datalist = document.getElementById("datalist");

ele_datalist.style.visibility = "visible";

ele_datalist.innerHTML = "";

if (srdata.length == 0) {

ele_datalist.style.visibility = "hidden";

}

//將搜索到的數(shù)據(jù)追加到顯示數(shù)據(jù)列表,然后每一行加入點擊事件,點擊后將數(shù)據(jù)放入搜索框內,數(shù)據(jù)列表隱藏

var self = this;

for (var i = 0; i < srdata.length; i++) {

var ele_li = document.createElement("li");

var ele_a = document.createElement("a");

ele_a.setAttribute("href","javascript:;");

ele_a.textContent = srdata[i];

ele_a.onclick = function () {

self.value = this.textContent;

ele_datalist.style.visibility = "hidden";

}

ele_li.appendChild(ele_a);

ele_datalist.appendChild(ele_li);

}

}

在添加數(shù)據(jù)到列表中時,我們首先對數(shù)據(jù)列表做初始化處理,避免重復數(shù)據(jù)的添加. 其次就是我們給數(shù)據(jù)列表的每一行添加了一個點擊事件,數(shù)據(jù)列表隱藏.

在這里整個自動完成的搜索框就完成了.我們來測試下效果.

這里可能是錄制軟件問題,邊框與它錄制的背景顏色應該一樣了. 邊框不見了(⊙﹏⊙)b

以上就是JAVASCRIPT實現(xiàn)搜索框的自動完成效果，大家可以自己測試玩玩!

總結

如果覺得編程之家網(wǎng)站內容還不錯，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內容來源于網(wǎng)友網(wǎng)絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經(jīng)驗，歡迎加入編程之家官方交流群！

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的html 搜索框 自动补全,自动完成的搜索框javascript实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。