JS实现输入框智能提示

来源：鹏顺教育

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
	<meta charset="utf-8" />
 <script>
 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);


 }
 }
 }
 </script>
</head>
<body>
 <input type="text" id="txt"/>
 <input type="button" value="百度一下" />
</body>
</html>

全部频道

JS实现输入框智能提示