원생 js 바이두 검색 상자 모방 사례

  
  
  




  
  




    //        
    function my$(id) {
            return document.getElementById(id);
    }
    //               
    function setInnerText(element,text) {
        if(typeof element.textContent == "undefined"){ //   
            element.innerText = text;
        }else{//      
            element.textContent = text;
      }
    }

  var keyWords = ["   ", "   ", "    "];
  //             
  my$("txt").onkeyup = function () {


    //                   div
    if(my$("dv")){
      //    
      my$("box").removeChild(my$("dv"));
    }
    //          
    var text = this.value;
    //    --   ------->        
    var tempArr = [];
    //                    
    for (var i = 0; i < keyWords.length; i++) {
      //         
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);//  
      }
    }
    //        ,       ,    div
    if (this.value.length == 0 || tempArr.length == 0) {
      //        div,    div
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }
      return;
    }
    //  div, div  id box div 
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    //dvObj.style.height="100px";//       ------
    dvObj.style.border = "1px solid green";
    //        ,     p  
    for (var i = 0; i < tempArr.length; i++) {
      //  p  
      var pObj = document.createElement("p");
      // p  div 
      dvObj.appendChild(pObj);
      setInnerText(pObj, tempArr[i]);
      pObj.style.margin = 0;
      pObj.style.padding = 0;
      pObj.style.cursor = "pointer";
      pObj.style.marginTop = "5px";
      pObj.style.marginLeft = "5px";
      //    
      pObj.onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //    
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }
  };