js轮子—输入框加候选框

来源：互联网发布：淘宝助理怎么关联打印编辑：程序博客网时间：2024/04/28 11:51

1.兼容ie8 主要是事件兼容

    var EventUtil = {      on:function(elem,type,handler){        if(elem.addEventListener){          elem.addEventListener(type,handler,false);        }else if(elem.attachEvent){          elem.attachEvent("on"+type,handler);        }      },      getEvent:function(event){        return event||window.event;      },      getTarget:function(event){        return event.target||event.srcElement;      },      getCharCode:function(event){        if(typeof event.handler == "number"){          return event.charCode;        }else{          return event.keyCode;        }      }    }

2.对于候选框里面的内容使用事件代理，以及点击空白处消失

    EventUtil.on(document.body,'click',function(e){      stopPropagation(e);      if(EventUtil.getTarget(e).nodeName=='BODY'){        datalist.style.visibility = 'hidden';        datalist.innerHTML ='';      }      if(EventUtil.getTarget(e).nodeName == "LI"){        input.value = EventUtil.getTarget(e).innerHTML;        datalist.style.visibility = 'hidden';        datalist.innerHTML ='';      }    })

3.兼容模式下的防止冒泡

    function stopPropagation(e){      e = window.event||e;      if(document.all){        e.cancelBubble = true;      }else{        e.stopPropagation();      }    }

4.效果图
这里写图片描述
5.完整代码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style media="screen">      html,body{margin: 0;padding: 0;height: 100%;width: 100%;}      input{        width: 200px;        border:1px solid grey;        padding: 0 2px;        line-height: 1.5rem;        box-sizing: border-box;        outline: none;      }      ul{        margin:0;        width: 200px;        padding: 0;        list-style: none;        box-sizing: border-box;        padding: 1px;        border:1px solid;        border-color: grey;        visibility: hidden;      }      li{        line-height: 1.5rem;        padding: 0 0 0 1px;      }      li:hover{        background-color: grey;      }      .section{        top:30%;        left:50%;        position: absolute;        margin-left: -100px;      }    </style>  </head>  <body>  <div class="section">      <input id="search"/>      <ul id="datalist">      </ul>  </div>  </body>  <script type="text/javascript">    var EventUtil = {      on:function(elem,type,handler){        if(elem.addEventListener){          elem.addEventListener(type,handler,false);        }else if(elem.attachEvent){          elem.attachEvent("on"+type,handler);        }      },      getEvent:function(event){        return event||window.event;      },      getTarget:function(event){        return event.target||event.srcElement;      },      getCharCode:function(event){        if(typeof event.handler == "number"){          return event.charCode;        }else{          return event.keyCode;        }      }    }    function stopPropagation(e){      e = window.event||e;      if(document.all){        e.cancelBubble = true;      }else{        e.stopPropagation();      }    }    var input = document.getElementById('search');    var datalist = document.getElementById('datalist');    var list_array = ['aa','aab','abc'];    function generatelist(array){      var _innerHTML = '';      for (var i = 0; i < array.length; i++) {        _innerHTML += '<li>'+array[i]+'</li>';      }      datalist.innerHTML = _innerHTML;    }    function findInArray(s){      var filter_array = [];      if(s!=''){        for (var i = 0; i < list_array.length; i++) {          if(list_array[i].indexOf(s)===0){            filter_array.push(list_array[i])          }        }      }      return filter_array;    }    input.onkeyup = function(){      var new_array = findInArray(this.value);      generatelist(new_array);      if(new_array.length>0){        setTimeout(function(){datalist.style.visibility = 'visible';},0);      }else{        setTimeout(function(){datalist.style.visibility = 'hidden';},0);      }    }    EventUtil.on(document.body,'click',function(e){      stopPropagation(e);      if(EventUtil.getTarget(e).nodeName=='BODY'){        datalist.style.visibility = 'hidden';        datalist.innerHTML ='';      }      if(EventUtil.getTarget(e).nodeName == "LI"){        input.value = EventUtil.getTarget(e).innerHTML;        datalist.style.visibility = 'hidden';        datalist.innerHTML ='';      }    })  </script></html>

0 0