<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. 温故而知新 Vue 原来也有this.$forceUpdate();

    由于一些嵌套特别深的数据,导致数据更新了.UI没有更新(连深度监听都没有监听到),我捉摸着有没有和react一样的立即更新UI的API呢 this.forceUpdate()呢?结果还真有: this ...

  2. 基于Docker的负载均衡和服务发现

    应用的容器化和微服务化带来的问题 在缺省网络模型中,容器每次重启后,IP会发生变动,在一个大的分布式系统保证IP地址不变是比较复杂的事情 IP频繁发生变动,动态应用部署无法预知容器的IP地址,clie ...

  3. MySQL内置函数获取几天前的日期

    如何采用mysql内置函数获取指定时间之前的日期呢? SELECT something FROM table_name WHERE DATE_SUB(CURDATE(),INTERVAL 30 DAY ...

  4. diocp3-服务器的连接上限是到底是多少?diocp3的一个装13测试(8W连接数)

    服务器的连接上限是到底是多少?diocp3开源项目的一个装13测试(8W连接数) 测试DEMO路径 diocp3\samples\ECHO 之前群里说一台服务器最多是High(Word)的连接数655 ...

  5. [mBean]-Delphi框架，回归简单，自然。

    [mBean]的萌芽 最近公司要求把我们公司的任务可以外包,问我有没有好的方案. 如果要其他程序员的人来做我们内部的框架会导致了,内部的框架需要公布很多单元和逻辑,思路.其次要把我们的思路和规则强加给 ...

  6. Android下基于SDL的位图渲染（一）

    环境准备 安装Android开发环境(java.android-sdk.android ndk.gcc). 我使用的ndk版本是r10b/r10d,在win10/ubutu 15.04编译 下载sdl ...

  7. mysql关联更新update

    https://blog.csdn.net/babyfish13/article/details/78082844 ****************************************** ...

  8. 【转】31个实用的find命令

    find . -name "*.sql" -exec md5sum {} \; 一.主要内容 ====================================== . 用文 ...

  9. Win10+VMplayer12中U盘无法挂载解决

    VMplayer 中运行mac osx,想挂载个U盘进去,无奈居然一直挂载不进去,而此时宿主机Win10中的U盘也消失,查看设备管理器居然显示"未知设备" 于是乎一顿度娘,网上的方 ...

  10. js的深入学习课程Object.prototype.toString.call()

    1.通过 Object.prototype.toString.call() 进行类型判断 function isArray(obj) { return Object.prototype.toStrin ...