<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. webpack 4.0的一些小坑

    一.需要指定开发模式还是生产模式,需要改动两个地方: 1.package.json 中加入 --mode development "scripts": { "dev&qu ...

  2. Mac笔记本安装mysql

    在浏览器当中输入地址:dev.mysql.com/downloads/mysql/,如下图所示:   进入以下界面,直接点击下面位置 ,选择跳过登录,点过这后直接下载,如下图所示:   下载完成后, ...

  3. 基于prometheus监控k8s集群

    本文建立在你已经会安装prometheus服务的基础之上,如果你还不会安装,请参考:prometheus多维度监控容器 如果你还没有安装库k8s集群,情参考: 从零开始搭建基于calico的kuben ...

  4. mysql获得60天前unix时间示例

    在mysql中获取多少天前的unix时间的方法.首先根据now()获得当前时间,使用adddate()方法获得60天前时间,使用unix_timestamp()方法转换时间类型 select UNIX ...

  5. Django在Win7下安装与创建项目hello word示例

    Django在Win7下的安装及创建项目hello word的例子 有关python 的django 框架安装与开发的小例子.Django在Win7下的安装及创建项目hello word.1.安装:命 ...

  6. Robolectric使用教程

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/53561172 本文出自: [HansChen的博客] 概述 怎样使用 为项目加入依赖 ...

  7. zabbix server 在配置客户端的时候 在zabbix server端的/etc/hosts文件的hostname 对应的ip这样可以更快的让server端发现agent端

    如下: # cat /etc/hosts 127.0.0.1 localhost.localdomain localhost.localdomain localhost4 localhost4.loc ...

  8. Lua 自己实现排序sort比较方法，抛出错误invalid order function for sorting

    明天新功能就要上了,结果刚刚突然QA说项目抛出了错误.握草,吓得立马出了一身汗. 查了一下错误,发现可能是自己写的不稳定排序造成的.自己感觉应该就是.把排序方法写成稳定的之后,代码分离编译进手机,跑了 ...

  9. 监听的instance status blocked分析

    对于处于NOMOUNT状态的数据库,PMON还没有将服务注册到监听上,这个时候服务的状态是BLOCKED的,对于来自远程的任何连接都会报ORA-12528错误.如下: [oracle@dbtest ~ ...

  10. c++之五谷杂粮---1

    1.  位运算符,如果运算对象是带符号的且它的值为负,那么位运算符如何处理运算对象的“符号位”依赖于机器.此时左移操作可能会改变符号位的值,因此是一种UB. Best Practices: 关于符号位 ...