自動完成的搜索框javascript實現

2019-01-04

編程之家

https://www.jb51.cc

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

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

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

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

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

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

比如

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

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

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

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

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

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

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

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

var val = this.value;

//獲取輸入框里匹配的數據

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]);

}

}

}

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

var val = this.value;

//獲取輸入框里匹配的數據

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]);

}

}

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

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

ele_datalist.style.visibility = "visible";

ele_datalist.innerHTML = "";

if (srdata.length == 0) {

ele_datalist.style.visibility = "hidden";

}

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

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);

}

}

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

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

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

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

總結

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

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

小編個人微信號 jb51ccc

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

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

總結

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

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