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.οnmοuseοut=function () {this.style.backgroundColor="white";};
//鼠标点击某个提示值后将值赋给文本框，并因此“提示div”
d.οnclick=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;" ο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>

转载于:https://www.cnblogs.com/linyijia/p/5534670.html

input 模糊搜索相关推荐

超好用的input模糊搜索 jq模糊搜索，
上来先展示效果: 默认展示效果: 输入内容: 上代码: css部分: <style type="text/css">* {padding: 0;margin: 0;}h ...
vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...
给文本框添加模糊搜索功能（“我记录”MVC框架下实现）
步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...
element UI 制作模糊搜索框
如图所示,当你输入某个关键字时,去掉用某个接口,然后通过关键字获取数据. View Code <el-autocompleteclass="inline-input"v-mo ...
自制仿360首页支持拼音输入全模糊搜索和自动换肤
360首页搜索效果如下 1.完成编写的schoolnet校园网主要目录结构如下主要实现支持中文.拼音首字母.拼音全字母的智能搜索和换肤页面效果如下主要核心代码如下 1.head.jsp < ...
jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果
功能描述: text框中输入,text框下面的listbox中实时显示依据输入的内容进行模糊搜索的结果 js代码 1 $j(function() { 2 $j("input[id='txtC ...
Mr.J--Javascript表格创建模糊搜索关键词搜索
本文章主要是了解js制作表格,不过现在前端一般都是用div+CSS布局,所以有兴趣的可以了解一下这种思想.在我们现实生活中表格是非常普遍的,也是非常好用的,现在我们有Excel,Word,WPS也可以 ...
常用SQL语句（增删查改、合并统计、模糊搜索）
转自:http://www.cnblogs.com/ljianhui/archive/2012/08/13/2695906.html 常用SQL语句首行当然是最基本的增删查改啦,其中最重要的是查. ...
java ftp模糊查询_前端js模糊搜索（模糊查询）
1.html结构: /*查询结果放ul里面*/ 2.css样式: #searchShop{ line-height:28px; text-indent:5px; width:180px; float: ...

input 模糊搜索

input 模糊搜索相关推荐

最新文章

热门文章