input 模糊搜索

Posted 2020-07-13 一佳一

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input 模糊搜索相关的知识，希望对你有一定的参考价值。

<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>

以上是关于input 模糊搜索的主要内容，如果未能解决你的问题，请参考以下文章

vue使用Element-ui使用el-tree控件实现模糊搜索

vue 如何实现 Input 输入框模糊查询方法

jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果

高亮显示筛选搜索元素模糊匹配多关键词搜索

vue的模糊搜索