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.效果图
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>
上一篇: 给您劈个叉吧