js 智能提示 php,JS实现输入框智能提示

本文主要和大家分享JS实现输入框智能提示，主要以代码的形式和大家分享，希望能帮助到大家。

var keyWords = {

"传智播客": ["传智播客java视频", "传智播客.net视频", "传智播客php视频"],

"杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"],

"杨": ["杨利伟", "杨振宇", "杨过"],

"杨忠": ["杨忠科", "杨忠学", "杨忠爱国"]

};

setInterval(function () {

document.getElementById('txt').onchange();

}, 500);

onload = function () {

document.getElementById('txt').onchange = function () {

if (document.getElementById('dv')) {

document.body.removeChild(document.getElementById('dv'));

}

if (keyWords[this.value]){

var dvObj = document.createElement('p');

dvObj.id = 'dv';

dvObj.style.width = '300px';

dvObj.style.height = '200px';

dvObj.style.border = '1px solid green';

dvObj.style.position = 'absolute';

dvObj.style.left = this.offsetLeft + 'px';

dvObj.style.top = this.offsetTop + this.offsetHeight + 'px';

ulObj = document.createElement('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 = '8px';

liObj.style.cursor = 'pointer';

//高亮显示

liObj.onmouseover = function () {

this.style.backgroundColor = 'yellow';

};

liObj.onmouseout = function () {

this.style.backgroundColor = '';

};

//添加到ul中

ulObj.appendChild(liObj);

}

//ulobj添加到层中

dvObj.appendChild(ulObj);

//层添加到body中

document.body.appendChild(dvObj);

}

}

}

相关推荐：