input 模糊搜索
生活随笔
收集整理的這篇文章主要介紹了
input 模糊搜索
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<html>
<head>
<title>test</title>
<script type="text/javascript">
//模擬數(shù)據(jù)庫(kù)中的一組數(shù)據(jù)（會(huì)使用用戶輸入的值在這些數(shù)據(jù)中進(jìn)行模糊匹配）
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對(duì)象
//每一次修改了文本框值觸發(fā)該事件后 都先將 “提示div” 中的所有值清空
while(parent.hasChildNodes()) {//當(dāng)div下還存在子節(jié)點(diǎn)時(shí) 循環(huán)繼續(xù)
parent.removeChild(parent.firstChild);
}
var value = obj.value;//用戶輸入的值
if (value == '') {//如果是將文本框中的值刪除完了，那么不再提醒 因此“提示div” 直接返回
parent.style.display='none';
return;
}
var myarr = new Array();//用于模擬存儲(chǔ)根據(jù)用戶輸入的值匹配到的數(shù)據(jù)
//模擬獲取用戶輸入的值在后臺(tái)可以模糊查詢出一些數(shù)據(jù)
for (var i = 0; i < arr.length; i++) {
if (arr[i].indexOf(value) != -1) {
myarr[myarr.length] = arr[i];
}
}
//如果用戶輸入的值可以匹配到數(shù)據(jù)，則將“提示div” 設(shè)為顯示，并為所有匹配到的數(shù)據(jù)創(chuàng)建一個(gè)div加入到“提示div”中
if (myarr.length > 0) {
parent.style.display='';
var d;//創(chuàng)建新的div
for (var i = 0; i < myarr.length; i++) {
d = document.createElement("div");
d.innerHTML = myarr[i];
d.onmouseover=function () {this.style.backgroundColor="red";};//鼠標(biāo)移到上邊變顏色
d.οnmοuseοut=function () {this.style.backgroundColor="white";};
//鼠標(biāo)點(diǎn)擊某個(gè)提示值后將值賦給文本框，并因此“提示div”
d.οnclick=function () {obj.value = this.innerHTML;parent.style.display="none";};
parent.appendChild(d);//將創(chuàng)建的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;" οninput="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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/linyijia/p/5534670.html
總結(jié)
以上是生活随笔為你收集整理的input 模糊搜索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计时器延迟 NSTimer和CAD
- 下一篇： Masonry（'couldn't fi