该例子实现的是用户输入信息或者字母时可以搜索出来，鼠标点击选择

 <!DOCTYPE html>

 <html>

     <style>

         p{

         width:200px;

         height:2em;

             padding:0;

             margin:0;

         background:#D4D4D4;

             display:none;

             border-bottom:1px solid black;

         }

         p:hover{

         background:#F7F7F7;

         }

         div{

         height:100px;

             width:200px;

         overflow-x:hidden;

         }

     </style>

 <body >

  <input type="text" id="input" onkeyup="query()" >

     <div >

     <p onclick="select(this)">js</p>

     <p onclick="select(this)">wes</p>

     <p onclick="select(this)">che</p>

     <p onclick="select(this)">women</p>

     <p onclick="select(this)">jswo</p>

     </div>

     <script>

         function select(obj){

         var text = document.getElementById("input");

         text.value = obj.innerHTML;   //实现选择

             var p = document.getElementsByTagName("p");

             for(var i=0;i<p.length;i++){

             p[i].style.display="none";  //选择完以后隐藏

             }

         }

         function query(){

         var p = document.getElementsByTagName("p");

         var text = document.getElementById("input");

         for(var i=0;i<p.length;i++){

         p[i].style.display="none";

         if(p[i].innerHTML.match(text.value)){ //匹配输入信息

         p[i].style.display="block";

         }

         }

         }

     </script>

 </body>

 </html>

js小例子（简单模糊匹配输入信息）的更多相关文章

  1. DevExpress控件cxGrid实现多列模糊匹配输入的完美解决方案

    本方案不需要修改控件源码,是完美解决cxgrid或TcxDBExtLookupComboBox支持多列模糊匹配快速输入的最佳方案!! 转自https://blog.csdn.net/qq5643020 ...

  2. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  3. DevExpress控件TExtLookupComboBox实现多列模糊匹配输入的方法

    本方案不需要修改控件源码,是完美解决支持多列模糊匹配快速输入的最佳方案!!   1.把列的Properties属性设置为ExtLookupComboBox. Properties.Incrementa ...

  4. 每天2个android小例子----简单计算器源代码

    通过Android4.0 网格布局GridLayout来实现一个简单的计算器界面布局 package com.android.xiong.gridlayoutTest; import java.mat ...

  5. activiti 用户手册中 10分钟 小例子 简单代码搭建 及 其中的 各种坑

    看mossle的 5.16 用户手册中的  快速起步:10分钟教程 想自己跑一下,虽然官方文档已经写的非常详细了,但是实际操作中还是遇到各种坑,这里记录下来. 首先官网下载最新的 5版本 full G ...

  6. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  7. js小例子（多字溢出，省略号表示）

    实现了div中字数较多,显示不下的时候,用省略号来表示,并且可以展开和收起: <html> <head> <meta http-equiv="Content-T ...

  8. Spring-Boot 中 Redis 的简单使用以及简单模糊匹配删除

    https://yulaiz.com/spring-boot-redis-simple/

  9. c#几个小例子引发的思考

    楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...

随机推荐

  1. 【python】list,dict赋值不要用等号，要用extend,update

    如果有一个list,我们用连等号的方式赋值 c = d = [1], 则当c改变时,d同样会改变.字典同理 正确做法应该是: d = [1] c = [1] 或者 d = [1] c.extend(d ...

  2. NPOI 1.2.4教程 –日期函数

    //Excel中有非常丰富的日期处理函数,在NPOI中同样得到了很好的支持.如下图: using NPOI.HSSF.UserModel; using NPOI.HPSF; using NPOI.PO ...

  3. c语言运算符

     一.op=形式的赋值操作符 int a=0; a+=1; //等价于 a=a+1;// a*=1;  二.op=类表达式 int a=10,b=5; a/=b;//等价于a=a/b; a*=b+1; ...

  4. NYOJ题目98成绩转换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsQAAAJhCAIAAADJ5jGJAAAgAElEQVR4nO3dq3LkSPg36O8mzH0hxn ...

  5. 理解KMP算法

    母串:S[i] 模式串:T[i] 标记数组:Next[i](Next[i]表示T[0~i]最长前缀/后缀数) 先来讲一下最长前缀/后缀的概念 例如有字符串T[6]=abcabd接下来讨论的全部是真前缀 ...

  6. 微信支付 - V3支付问题

    参考资料:http://www.2cto.com/weixin/201506/407690.html   1.微信公众号支付出错: 当前页面的URL未注册: get_brand_wcpay_reque ...

  7. 【Javascript】IE8兼容 背景图片与a标签的onclick事件

    先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...

  8. 无废话ExtJs 入门教程十一[下拉列表：Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  9. 【译】Visual Studio 15 预览版更新说明

    序:恰逢Build2016大会召开,微软发布了VS2015的update2更新包和VS2016预览版.本人正在提升英文水平中,于是在这里对VS2016预览版的官方文档进行了部分翻译.因为VS有些功能使 ...

  10. C#在excel中添加超链接

    1.新建一个项目 2.给项目添加引用:Microsoft Excel 12.0 Object Library (2007版本) using Excel = Microsoft.Office.Inter ...