欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript组件开发之输入框加候选框

程序员文章站 2022-04-26 17:31:08
1.兼容ie8 主要是事件兼容 var eventutil = { on:function(elem,type,handler){ if(ele...

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.效果图

JavaScript组件开发之输入框加候选框 

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>