<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 = ; i < arr.length; i++) {

if (arr[i].indexOf(value) != -) {

myarr[myarr.length] = arr[i];

}

}

//如果用户输入的值可以匹配到数据，则将“提示div” 设为显示，并为所有匹配到的数据创建一个div加入到“提示div”中

if (myarr.length > ) {

parent.style.display='';

var d;//创建新的div

for (var i = ; 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 模糊搜索的更多相关文章

  1. 超好用的input模糊搜索 jq模糊搜索，

    上来先展示效果:默认展示效果: 输入内容: 上代码: css部分: <style type="text/css"> * { padding:; margin:; } h ...

  2. input模糊搜索功能

    <!doctype html> <meta charset="utf-8"> <style type="text/css"> ...

  3. layui select配合input实现动态模糊搜索

    功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能 html代码: 样式: <style> .select-search-i ...

  4. input事件在进行模糊搜索时，用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  5. zTree树的模糊搜索

    工作需要,所以做了一个比较方便的搜索功能:1.功能实现都是基于zTree的API:2.如有更好的建议,欢迎拍我:其中要说明下的是flag 这个字段, 这是我自己定义的扩展字段,代码中涉及到flag 请 ...

  6. 给文本框添加模糊搜索功能（“我记录”MVC框架下实现）

    步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...

  7. 常用SQL语句（增删查改、合并统计、模糊搜索）

    转自:http://www.cnblogs.com/ljianhui/archive/2012/08/13/2695906.html 常用SQL语句 首行当然是最基本的增删查改啦,其中最重要的是查. ...

  8. 专注UI——有用技术：模糊搜索

    在如今的项目中.须要做模糊搜索,在曾经技术的基础上非常快得完毕了第一版.大家先看看第一版的效果,我们一会做评论: 0基础: 我们可能部分源代码(附件中会有所有源代码) <span style=& ...

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

    功能描述: text框中输入,text框下面的listbox中实时显示依据输入的内容进行模糊搜索的结果 js代码 $j(function() { $j("input[id='txtCos'] ...

随机推荐

  1. Mac idea 执行testng用例，提示%MODULE_WORKING_DIR%目录不存在解决办法

    idea 下载git代码 执行testng用例,报错: 下午4:47 Error running 'Test.apkStart': Cannot start process, the working ...

  2. Spring 注解@Component,@Service,@Controller,@Repository

    Spring 注解@Component,@Service,@Controller,@RepositorySpring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释, ...

  3. 不要随便使用 runAllManagedModulesForAllRequests="true" 来解决问题

    在 IIS 7.0 中,对于使用 Url 路由 访问页面的 ASP.NET 应用程序,IIS可能会不能出 Url 是对 ASP.NET 的请求. 会显示404啊,403啊之类的错误代码(因为路径不存在 ...

  4. 关于NOIP的运行环境

    目前(2019年2月22日)仍然是 G++ , 终端运行,命令行: g++ test.cpp -o test ,而g++ 4.8.4默认标准是: -std=gnu++ . g++到了gcc6才把默认标 ...

  5. NGINX宏观手记(变量|配置)

    前言 任何一个工具都有它的灵魂所在,作为一个PHP程序员,我们可能仅仅使用了它的一小部分,这篇文章让你更加了解Nginx,本章大多都是总结.翻译.整理 ,希望你可以知道nginx不仅仅是PHP的附属品 ...

  6. Hibernate 建立一对多双向关联关系

    下面内容整理自<精通Hibernate>第二版 注:既然是双向关联."一对多双向关联"和"多对一双向关联"是同一回事. 对象位于内存中,在内存中从一 ...

  7. What-are-P-NP-NP-complete-and-NP-hard

    https://www.amazon.com/Computational-Complexity-Approach-Sanjeev-Arora/dp/0521424267 http://theory.c ...

  8. Spring开启方法异步执行

    @EnableAsync @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Import(Async ...

  9. (转)C++11里的智能指针

    1. std::auto_ptr有些违背c++编程思想. 已经被"不建议使用了".2. 下文转自:http://blog.csdn.net/lanergaming/article/ ...

  10. (原)logstash-forwarder + logstash + elasticsearch + kibana

    [logstash-forwarder + logstash + elasticsearch + kibana]-------------------------------------------- ...