本文给大家分享基于js组件开发的输入框加候选框的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
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>
<p class="section">
<input id="search"/>
<ul id="datalist">
</ul>
</p>
</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>
以上就是javascript组件开发之输入框加候选框的示例代码分享的详细内容。