JavaScript组件开发之输入框加候选框
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
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>
下一篇：原生javascript移动端滑动banner效果