模仿百度搜索框

  <!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>百度搜索框</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 400px;
      margin: 200px auto;
      /*border: 1px solid #000;*/
    }

    #txtSearch {
      width: 300px;
    }

    #pop {
      width: 300px;
      border: 1px solid red;
      padding: 0px;
    }

    #pop ul {
      list-style-type: none;
      margin: 5px;
      padding: 0px;
    }

  </style>
</head>
<body>
<div id="box">
  <input type="text" value="" id="txtSearch"/>
  <input type="button" value="搜索" id="btnSearch"/>
  <!--<div id="pop">-->
  <!--<ul>-->
  <!--<li>a</li>-->
  <!--<li>ab</li>-->
  <!--<li>abc</li>-->
  <!--<li>abcd</li>-->
  <!--<li>abcde</li>-->
  <!--<li>amm</li>-->
  <!--</ul>-->
  <!--</div>-->
</div>
</body>
</html>
<script src="common.js"></script>
<script>
  // 當(dāng)我們在輸入框中鍵盤按下，并抬起的時候，就會向服務(wù)器發(fā)送一條ajax請求,去服務(wù)器的數(shù)據(jù)庫中查詢以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)，如果找到了，則將這些數(shù)據(jù)返回給瀏覽器，渲染到指定的位置

  // 用本地?cái)?shù)組模擬一下數(shù)據(jù)庫
  var strs =["a","ab","abc","abcd","abcde","acc","amm","mmm","kkk"];

  // 1. 獲取要操作的對象
  var box = $$("box");
  var txtSearch = $$("txtSearch");
  // 2. 給事件源注冊事件
  txtSearch.onkeyup  = function (){
    // 3.先獲取一下輸入框中的數(shù)據(jù)
    var value = txtSearch.value;
    // 4. 到數(shù)據(jù)庫中查詢，數(shù)組中的哪些元素是以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)，如果找到了，就需要存到一個新的數(shù)組當(dāng)中
    var filterArr = []; // filter過濾
    for(var i = 0; i < strs.length; i++) {
       // 如果當(dāng)前的數(shù)據(jù)在數(shù)組中的元素當(dāng)中的索引位置是0的話，就可以把數(shù)組當(dāng)中的這個元素，看成是以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)
      // strs[i]是數(shù)組中的遍歷到的每一項(xiàng)，是一個字符串，然后判斷這個字符串是不是以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)
      if(strs[i].indexOf(value)==0){
        filterArr.push(strs[i]);
      }
    }
    //11. 在生成新的盒子之前先把舊的盒子清除掉
    var divPop = $$("pop");
    if(divPop){
      box.removeChild(divPop);
    }

    //12.如果過濾數(shù)組中的元素為空的話，就不要往下執(zhí)行，就是說不要再創(chuàng)建div和ul
    if(!filterArr.length){
        return;// 退出函數(shù)，下面的代碼都不會執(zhí)行
    }
    //13.如果輸入框里面的內(nèi)容為空的話，不用再往下執(zhí)行代碼，不需要創(chuàng)建元素
    if(!value){
        return; //退出函數(shù)
    }
    // 循環(huán)遍歷完數(shù)組之后,filterArr里面就存了以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)
    //5. 動態(tài)的創(chuàng)建元素，首先創(chuàng)建div
    divPop = document.createElement("div");
    divPop.setAttribute("id","pop");
    box.appendChild(divPop);
    // 6. 創(chuàng)建ul
    var ul = document.createElement("ul");
    divPop.appendChild(ul);
    // 7. 創(chuàng)建li標(biāo)簽 ，要根據(jù)filterArr數(shù)組中的元素的個數(shù)創(chuàng)建對應(yīng)的li標(biāo)簽
    for(var i = 0; i < filterArr.length; i++) {
         var li = document.createElement("li");
        Txt.setText(li,filterArr[i]); // 給每個li標(biāo)簽添加文本內(nèi)容
        ul.appendChild(li); // 將li標(biāo)簽添加到ul中
      //8. 給每個li標(biāo)簽添加鼠標(biāo)移入的事件，讓當(dāng)前行的背景顏色變成灰色
      li.onmouseover = function (){
             this.style.backgroundColor = "#d0d0d0";
      }
      //9. 鼠標(biāo)離開的時候，要還原原來的顏色
      li.onmouseout = function (){
             this.style.backgroundColor = "#fff";
      }
      // 10. 選中當(dāng)前行的時候，要讓當(dāng)前行的內(nèi)容填充在輸入框中，盒子不要了
      li.onclick = function (){
            txtSearch.value = Txt.getText(this);
        box.removeChild(divPop);
      }
    }
  }


  // 1. 鍵盤按下并抬起的時候，獲得用戶輸入的數(shù)據(jù)
  // 2. 拿著用戶輸入的數(shù)據(jù)，去數(shù)據(jù)庫搜索以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)
  // 3. 找到以用戶輸入的內(nèi)容為開頭的數(shù)據(jù)，存入新的容器中
  // 4. 根據(jù)匹配到的數(shù)據(jù)(根據(jù)新數(shù)組的長度，來動態(tài)的生成列表中的li)，動態(tài)的生成列表
  // 5. 判斷特殊情況
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容