JavaScript組件開發之輸入框加候選框，javascript組件

最後更新：2017-03-14 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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();   }  }

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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More