<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. [转]同步对象Event的用法

    同步对象Event的用法  首先介绍CreateEvent是创建windows事件的意思,作用主要用在判断线程退出,线程锁定方面.  CreateEvent函数功能描述:创建或打开一个命名的或无名的事 ...

  2. mysql打开binlog

    修改mysql的配置文件,ubuntu下mysql的配置文件存放位置为:/etc/mysql/my.cnf 找到log_bin配置项,指定一个路径: 重启数据库:/etc/init.d/mysql r ...

  3. BigBao 的python开发到DevOps 之路

    本人是打杂的,从想学Python到自学Python,最后到报班培训Python路程总共用时两年,目前在培训Python.因为我这个大脑不适合自学.脑袋笨,自制力差,所以没办法只有乖乖交钱学python ...

  4. Vue（二）：调试神器vue-devtools安装和使用

    前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直 ...

  5. iOS 中strong，weak，copy，assign区别

    1:ARC环境下,strong代替retain.weak代替assign2:weak的作用:在ARC环境下,,所有指向这个对象的weak指针都将被置为nil.这个T特性很有用,相信很多开发者都被指针指 ...

  6. [svc]linux正则实战(grep/sed/awk)

    企业实战: 过滤ip 过滤出第二行的 192.168.2.11. eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500 ine ...

  7. Vue2.0 v-for 中 :key 的作用

  8. iOS 系统消息通知

    一.键盘 1.UIKeyboardWillShowNotification-将要弹出键盘 2.UIKeyboardDidShowNotification-显示键盘 3.UIKeyboardWillHi ...

  9. nodejs批量处理图片

    var gm = require('gm');var imageMagick = gm.subClass({ imageMagick : true });var path = require('pat ...

  10. 如何将git本地创建的项目推送到github仓库

    除了集中式的版本控制系统CVS和SVN外,还有目前世界上最先进的分布式版本控制系统Git,它的创始人是创建了linux的大神 - linus.GitHub网站与2008年开始服役,为开源项目免费提供G ...