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

更新時間：2016年02月26日 10:50:10 作者：吳統(tǒng)威

這篇文章主要介紹了自動完成的搜索框javascript實現(xiàn)代碼，感興趣的小伙伴們可以參考一下

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

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

界面的HTML結(jié)構(gòu), 第一個少不了的是一個搜索框, 第二個就是搜索的點擊按鈕.

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

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

.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;
}

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

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

我們將這行代碼追加到.search的內(nèi)容后面.然后設(shè)置CSS代碼, 我們設(shè)置他的最小寬度為.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代碼之前, 將默認(rèn)的一些瀏覽器樣式清除.最后效果如下.

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

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

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

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

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

后臺數(shù)據(jù)有了, 事件也添加了. 這時候我們對數(shù)據(jù)進行處理了.
首先是獲取用輸入的數(shù)據(jù), 來然后與后臺數(shù)據(jù)進行比較. 然后將比較后的數(shù)據(jù)保存在一個數(shù)據(jù)里面.

//定義一些數(shù)據(jù)
var data = ["編程的人", "武林外傳", "葵花寶典", "九陰白骨爪", "武林江湖", "will"];
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {

  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ù)列表中.

//定義一些數(shù)據(jù)
var data = ["編程的人", "武林外傳", "葵花寶典", "九陰白骨爪", "武林江湖", "will"];
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {

  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ù)準(zhǔn)備追加顯示, 前期要做的事情: 清空數(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ù)放入搜索框內(nèi), 數(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ù)列表做初始化處理,避免重復(fù)數(shù)據(jù)的添加. 其次就是我們給數(shù)據(jù)列表的每一行添加了一個點擊事件,點擊后將數(shù)據(jù)放入搜索框內(nèi), 數(shù)據(jù)列表隱藏.

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