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

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

var事件util={ :函数(elem，类型，处理程序){ if(elem。addevent listener){ elem。addevent侦听器(类型，处理程序，false)；} else if(elem。attachevent){ elem。attachevent(' on '类型，处理程序);} }，getevent :函数(事件){ return event | | window。事件；}，gettarget :函数(事件){ return event。目标| |事件。加速；}，getcharcode :函数(事件){ if(事件类型。处理程序==' number '){ return事件。charcode} else { return event.keyCode} } }2。对于候选框里面的内容使用事件代理，以及点击空白处消失

EventUtil.on(document.body，' click '，function(e){ stopperpagation(e)；if(EventUtil.getTarget(e)).nodeName==' BOdy '){ datalist。风格。可见性='隐藏'；datalist . innerhtml=} if(eventutil . gettarget(e)).nodeName==' LI '){输入。value=eventutil。获得目标.innerHTMLdatalist。风格。可见性='隐藏'；datalist.innerHTML=} })3。兼容模式下的防止冒泡

功能停止传播(e){ e=窗口。事件| | e；if(文档。all){ e . cancelable=true；} else { e . stopperpagation()；} }4.效果图

5.完整代码

！DOCTYPE html html head meta charset=' utf-8 ' title/title style media=' screen ' html，body { margin 3360 0；padd : 0；高度： 100%;宽度： 100%;}输入{ width: 200pxborder:1px纯灰色；padding: 0 2px线高： 1.5雷姆；盒子尺寸：边框盒子；大纲：无；} ul { margin:0宽度： 200像素；padd : 0；列表样式：无；盒子尺寸：边框盒子；padding: 1pxborder:1px固体；边框颜色：灰色；可见性：隐藏；}李{行高： 1.5雷姆；padding: 0 0 0 1px } Li :悬停{底色：灰色；} .第{ top:30左侧：50%;绝对位置：左边距：-100px；}/style/head body div class=' section ' input id=' search '/ul id=' datalist '/ul/div/body script type=' text/JavaScript ' var event util={ : function(elem，type，handler){ if(elem。addevent listener){ elem。addevent侦听器(类型，处理程序，false)；} else if(elem。attachevent){ elem。attachevent(' on '类型，处理程序);} }，getevent :函数(事件){ return event | | window。事件；}，gettarget :函数(事件){ return event。目标| |事件。加速；}，getcharcode :函数(事件){ if(事件类型。处理程序==' number '){ return事件。charcode} else { return event . KeyCode } } } function stopperpagation(e){ e=window。事件| | e；if(文档。all){ e . cancelable=true；} else { e . stopperpagation()；} } var输入=文档。getelementbyid(' search ')；var datalist=文档。getelementbyid(' datalist ')；var list_array=['aa '，' aab '，' ABC ']；函数生成列表(数组){ var _ innerHTML=for(var I=0；i array.lengthi ) { _innerHTML='li '数组[I]'/李；} datalist。innerHTML=_ innerHTML}函数findinaray { var filter _ array=[]；如果！=' '){ for(var I=0；I list _ array . lengthi){ if(list _ array[I]).indexOf(s)===0){ filter _ array。push(list _ array[I])} } } return filter _ array；}输入。onkeyup=function(){ var new _ array=findinaray(this。值)；生成列表(new _ array)；if(new _ array。长度0){ setTimeout(函数(){ data list }。风格。可见性='可见'；},0);} else { setTimeout(函数(){ data list }。风格。可见性='隐藏'；},0);} } EventUtil.on(document.body，' click '，function(e){ stopperpagation(e)；if(EventUtil.getTarget(e)).nodeName==' BOdy '){ datalist。风格。可见性='隐藏'；datalist . innerhtml=} if(eventutil . gettarget(e)).nodeName==' LI '){输入。value=eventutil。获得目标.innerhtml datalist . style . visibility="隐藏";datalist.innerHTML=} })/脚本/html