本文介绍如何使用JavaScript开发一个兼容IE8的输入框自动补全组件。核心方案包括封装跨浏览器事件工具、利用事件代理处理候选项点击与空白处隐藏逻辑，以及解决兼容模式下的冒泡问题。文章提供了完整的CSS样式与JS实现代码，适用于需要支持旧版浏览器的Web项目。
IE8兼容性与事件处理基础
开发该组件的首要任务是确保对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;
}
}
}候选框交互与事件代理实现
在候选框内容的交互上，采用事件代理技术来优化性能，并实现了点击页面空白区域时自动隐藏候选框的功能。
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 ='';
}
})兼容模式下的冒泡控制
针对兼容模式下可能出现的冒泡问题，进行了专门的防止冒泡处理，以确保事件触发的准确性。
function stopPropagation(e){
e = window.event||e;
if(document.all){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}组件效果展示
以下是该组件的实际运行效果展示。
完整代码实现
接下来提供该组件的完整实现代码，供开发者参考与使用。
<!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>