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

时间：2021-05-26

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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章