<html>
<head>
<title>test</title>
<script type="text/javascript">
//模拟数据库中的一组数据（会使用用户输入的值在这些数据中进行模糊匹配）
var arr = [‘aabb‘,‘abc‘,‘23sa‘,‘adsdw‘,‘32ad‘,‘sd‘,‘ssdd‘,‘ssddddd‘,‘233a‘,‘sdfsadf‘,‘rfgsedr‘,‘rtgea‘,‘adfasdf‘,‘erfgerg‘,‘qwefa‘,‘sedfrg‘,‘dsd3‘,‘adfv‘];
function change(obj) {
var parent = document.getElementById("parent");//用于显示提示值的div对象
//每一次修改了文本框值触发该事件后 都先将 “提示div” 中的所有值清空
while(parent.hasChildNodes()) {//当div下还存在子节点时 循环继续
parent.removeChild(parent.firstChild);
}
var value = obj.value;//用户输入的值
if (value == ‘‘) {//如果是将文本框中的值删除完了，那么不再提醒 因此“提示div” 直接返回
parent.style.display=‘none‘;
return;
}
var myarr = new Array();//用于模拟存储根据用户输入的值匹配到的数据
//模拟获取用户输入的值在后台可以模糊查询出一些数据
for (var i = 0; i < arr.length; i++) {
if (arr[i].indexOf(value) != -1) {
myarr[myarr.length] = arr[i];
}
}
//如果用户输入的值可以匹配到数据，则将“提示div” 设为显示，并为所有匹配到的数据创建一个div加入到“提示div”中
if (myarr.length > 0) {
parent.style.display=‘‘;
var d;//创建新的div
for (var i = 0; i < myarr.length; i++) {
d = document.createElement("div");
d.innerHTML = myarr[i];
d.onmouseover=function () {this.style.backgroundColor="red";};//鼠标移到上边变颜色
d.onmouseout=function () {this.style.backgroundColor="white";};
//鼠标点击某个提示值后将值赋给文本框，并因此“提示div”
d.onclick=function () {obj.value = this.innerHTML;parent.style.display="none";};
parent.appendChild(d);//将创建的div加入到“提示div”中
}
} else {//否则，不显示“提示div”
document.getElementById("parent").style.display=‘none‘;
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<input type="text" name="name" id="name" style="width:200px;" oninput="change(this);" /><!--IE的话这里的事件不是oninput,而是onpropertychange -->
<div style="border-left:1 red solid;width:200px;border-bottom:1 red solid;border-right:1 red solid;display:none;" id="parent">
</div>
</form>
</body>
</html>
时间： 2024-11-13 10:21:06