//计时器隔0.5秒自动判断
setInterval(function () {
document.getElementById(‘txt‘).onchange();
}, 500);
if (true) {
}
onload = function () {
//给搜索的文本框注册一个onchange事件,当文本框内容改变的时候根据文本框的的键去查找值
document.getElementById(‘txt‘).onchange = function () {
//当已经有一个dv的div层存在时 移除原dv
if (document.getElementById(‘dv‘)) {
document.body.removeChild(document.getElementById(‘dv‘));
}
//当键中存在的话,创建一个div的层,并显示
if (keyWords[this.value]) {
var dvObj = document.createElement(‘div‘);
dvObj.id = ‘dv‘;
dvObj.style.width = ‘300px‘;
dvObj.style.height = ‘200px‘;
dvObj.style.border = ‘1px solid red‘;
dvObj.style.position = ‘absolute‘;
dvObj.style.left = this.offsetLeft + ‘px‘;
dvObj.style.top = this.offsetHeight + this.offsetTop + ‘px‘;
//创建无序列表将键值对中的值加载到div中
var ulObj = document.createElement(‘ul‘);
ulObj.id = ‘ul‘;
ulObj.style.listStyleType = ‘none‘;
ulObj.style.margin = ‘0‘;
ulObj.style.padding = ‘0‘;
//加载
for (var i = 0; i < keyWords[this.value].length; i++) {
//创建li
var liObj = document.createElement(‘li‘);
liObj.innerText = keyWords[this.value][i];
liObj.style.marginTop = ‘5px‘;
liObj.style.cursor = ‘pointer‘;
ulObj.appendChild(liObj);
//鼠标移到指定li上的时候高亮显示,移走的时候恢复
liObj.onmouseover = function () {
this.style.backgroundColor = ‘red‘;
};
liObj.onmouseout = function () {
this.style.backgroundColor = ‘‘;
};
};
//在div中添加ul
dvObj.appendChild(ulObj);
//添加div
document.body.appendChild(dvObj);
};
};
};
原文:http://www.cnblogs.com/clcloveHuahua/p/5120816.html