<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. npm的影武者 —— Npx

    npx github:https://github.com/zkat/npx 什么是Npx?它和npm是什么关系? 如果你把NPM升级到最新版本npm@5.2.0 ,它就会安装一个新的包npx $ n ...

  2. UI测试后生成测试报告，利用shell脚本上传svn

    ui测试后生成测试报告,把报告保存在某一个固定路径 shell脚本把这个报告上传 #!/bin/bash -ile #svn下载文件 #svn checkout http://svn.xxx.com/ ...

  3. jenkins启动appium服务

    想在jenkins中,自动定时启动appium服务,shell命令已准备如下: BUILD_ID=dontKillMe echo "" > appium.log nohup ...

  4. ext: gridpanel中的点击事件的参数是什么意思？

    listeners: {      // 当用户单击列表项时激发该函数      itemclick: function(view, record, item, index, evt)  //①    ...

  5. 检查本机显卡的cuda信息及适配cuda-sdk版本

    1.按照本机显卡的最新版本,一般用驱动精灵安装,省事. 2.右击桌面->nvidia控制版本->"帮助"->"系统信息“ 3.这里有”显示“,主要记录了 ...

  6. 在sublime text3中安装git插件

    使用Package Control组件(推荐),打开install package控制台后,直接输入git就可以安装git插件. 这个时候Sublime Text只是安装了git插件,但还不能使用gi ...

  7. android笔记---百度地图api应用 (一)

    package com.example.bdtest; import com.baidu.mapapi.MKEvent; import com.baidu.mapapi.MKPlanNode; imp ...

  8. Beef-xss

    Beef xss beef安装目录:/usr/share/beef-xss UI URL: http://IP:3000/ui/panel Hook: <script src="htt ...

  9. std::bind技术内幕

    引子 最近群里比较热闹,大家都在山寨c++11的std::bind,三位童孩分别实现了自己的bind,代码分别在这里: 木头云的实现 mr.li的实现 null的实现,null的另一个版本的实现 这些 ...

  10. jsonrpc使用

    jsonrpc使用 1.什么是rpc RPC(Remote Procedure Call)远程过程调用,简单说就是通过网络请求服务,不需要了解底层网络技术的协议. 常用语分布式应用程序. 2.rpc数 ...