自動完成的搜尋方塊javascript實現，自動完成javascript

自動完成的搜尋方塊javascript實現，自動完成javascript

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

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

介面的HTML結構, 第一個少不了的是一個搜尋方塊, 第二個就是搜尋的點擊按鈕.

 <div class="search">     <input type="text" value="">     <button>搜尋</button> </div>

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

.search {  display: inline-flex;  height: 35px;  margin: 50px auto;  position: relative;}.search input {  border: #eee 1px solid;  background-color: #fff;  outline: none;  width: 200px;  padding: 0 5px;}.search button {  background-color: #ff3300;  color: #fff;  border: none;  width: 80px;}

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

<ul>  <li><a href="#">武林外傳</a> </li>  <li><a href="#">葵花寶典</a> </li>  <li><a href="#">如來佛掌</a> </li>  <li><a href="#">九陰白骨爪</a> </li></ul>

我們將這行代碼追加到.search的內容後面.然後設定CSS代碼, 我們設定他的最小寬度為.search寬度減去搜尋按鈕的寬度.這樣就跟搜尋方塊一樣寬.

.search ul {  position: absolute;  left: 0;  top: 35px;  border: #eee 1px solid;  min-width: calc(100% - 80px);  text-align: left;}.search ul a {  display: block;  padding: 5px;}

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

好了.下面我們完成JS的代碼控制.
我們來分析下, 其中的事件. 使用者在輸入框輸入文字後, 將輸入的文字與後台資料做查詢, 查詢到後返回給用戶端, 然後將返回的資料顯示在資料列表下.

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

 var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) {   //處理事件 }

這裡我們類比一個後台資料, 這裡用資料來表示,然後加入一些資料

var data = ["編程的人", "武林外傳", "葵花寶典", "九陰白骨爪", "武林江湖", "will"];

後台資料有了, 事件也添加了. 這時候我們對資料進行處理了.
首先是擷取用輸入的資料, 來然後與後台資料進行比較. 然後將比較後的資料儲存在一個資料裡面.

//定義一些資料var data = ["編程的人", "武林外傳", "葵花寶典", "九陰白骨爪", "武林江湖", "will"];var ele_key = document.getElementById("key");ele_key.onkeyup = function (e) {  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 data = ["編程的人", "武林外傳", "葵花寶典", "九陰白骨爪", "武林江湖", "will"];var ele_key = document.getElementById("key");ele_key.onkeyup = function (e) {  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實現搜尋方塊的自動完成效果，大家可以自己測試玩玩!

您可能感興趣的文章:

• javascript搜尋方塊點擊文字消失失焦時文本出現
• JS+CSS實現仿新浪微博搜尋方塊的方法
• javascript實現ecshop搜尋方塊鍵盤上下鍵切換控制
• JS實現仿google、百度搜尋方塊輸入資訊智能提示的實現方法
• javascript搜尋方塊效果實現方法
• javascript實作類別似於新浪微博搜尋方塊彈出效果的方法
• js實現YouKu的漂亮搜尋方塊效果
• js實現搜尋方塊關鍵字智能符合代碼