js实现模糊匹配功能


Posted in Javascript onFebruary 15, 2017

功能描述:

在搜索框中输入某一个字段,可以查询到相关的内容

功能实现:

1.  先声明变量用于保存输入框以及表格里面的内容
2.  循环遍历
遍历表格每一行,查找匹配项
3.  判断
如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏

功能实现:

<html> 
<head> 
  <style> 
    #myInput { 
      width: 100%; 
      font-size: 16px; 
      padding: 12px 20px 12px 40px; 
      border: 1px solid #ddd; 
      margin-bottom: 12px; 
    } 
    #myTable { 
      border-collapse: collapse; 
      width: 100%; 
      border: 1px solid #ddd; 
      font-size: 18px; 
    } 
    #myTable th, #myTable td { 
      text-align: left; 
      padding: 12px; 
    } 
    #myTable tr { 
      border-bottom: 1px solid #ddd; 
    } 
    #myTable tr.header, #myTable tr:hover { 
      background-color: #f1f1f1; 
    } 
  </style> 
</head> 
<body> 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> 
<table id="myTable"> 
  <tr class="header"> 
    <th style="width:60%;">项目名称</th> 
    <th style="width:40%;">时间</th> 
  </tr> 
  <tr> 
    <td>redPackets</td> 
    <td>2017.2.6</td> 
  </tr> 
  <tr> 
    <td>traffic</td> 
    <td>2016.12.25</td> 
  </tr> 
  <tr> 
    <td>creditCard</td> 
    <td>2017.1.18</td> 
  </tr> 
  <tr> 
    <td>returnMoney</td> 
    <td>2016.11.25</td> 
  </tr> 
</table> 
<script> 
  function myFunction() { 
    // 声明变量 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    // 循环表格每一行,查找匹配项 
    for (i = 0; i < tr.length; i++) { 
      td = tr[i].getElementsByTagName("td")[0]; 
      if (td) { 
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
          tr[i].style.display = ""; 
        } else { 
          tr[i].style.display = "none"; 
        } 
      } 
    } 
  } 
</script> 
</body> 
</html>

扩展:模拟通讯录搜索提示

<html> 
<head> 
  <style> 
    #myInput { 
      width: 100%; 
      font-size: 16px; /* 加大字体 */ 
      padding: 12px 20px 12px 40px; 
      border: 1px solid #ddd; 
      margin-bottom: 12px; 
    } 
 
    #myUL { 
      list-style-type: none; 
      padding: 0; 
      margin: 0; 
    } 
 
    #myUL li a { 
      border: 1px solid #ddd; /* 链接添加边框 */ 
      margin-top: -1px; 
      background-color: #f6f6f6; 
      padding: 12px; 
      text-decoration: none; 
      font-size: 18px; 
      color: black; 
      display: block; 
    } 
 
    #myUL li a.header { 
      background-color: #5587A2; 
      cursor: default; 
    } 
 
    #myUL li a:hover:not(.header) { 
      background-color: #eee; 
    } 
  </style> 
</head> 
<body> 
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> 
 
  <ul id="myUL"> 
    <li><a href="#" class="header">A</a></li> 
    <li><a href="#">Angel</a></li> 
    <li><a href="#">Adobe</a></li> 
    <li><a href="#">Anne</a></li> 
 
    <li><a href="#" class="header">B</a></li> 
    <li><a href="#">Betty</a></li> 
    <li><a href="#">Bella</a></li> 
    <li><a href="#">Brown</a></li> 
 
    <li><a href="#" class="header">C</a></li> 
    <li><a href="#">Calvin</a></li> 
    <li><a href="#">Chris</a></li> 
    <li><a href="#">Claire</a></li> 
 
    <li><a href="#" class="header">D</a></li> 
    <li><a href="#">David</a></li> 
    <li><a href="#">Daniel</a></li> 
    <li><a href="#">Dora</a></li> 
 
    <li><a href="#" class="header">E</a></li> 
    <li><a href="#">Emily</a></li> 
    <li><a href="#">Elena</a></li> 
    <li><a href="#">Eufemia</a></li> 
  </ul> 
<script> 
  function myFunction() { 
    // 声明变量 
    var input, filter, ul, li, a, i; 
    input = document.getElementById('myInput'); 
    filter = input.value.toUpperCase(); 
    ul = document.getElementById("myUL"); 
    li = ul.getElementsByTagName('li'); 
 
    // 循环所有列表,查找匹配项 
    for (i = 0; i < li.length; i++) { 
      a = li[i].getElementsByTagName("a")[0]; 
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = ""; 
      } else { 
        li[i].style.display = "none"; 
      } 
    } 
  } 
</script> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
微信小程序 基础知识css样式media标签
Feb 15 #Javascript
js 性能优化之快速响应的用户界面
Feb 15 #Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 #Javascript
DOM事件探秘篇
Feb 15 #Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python try 异常处理(史上最全)
2019/03/07 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python实现堆排序的实例讲解
2020/02/21 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
材料化学应届生求职信
2013/10/09 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
求职毕业生自荐书
2014/02/08 职场文书
微笑服务标语
2014/06/24 职场文书
法定代表人身份证明书
2014/09/10 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
解除同居协议书
2015/01/29 职场文书
冰峪沟导游词
2015/02/09 职场文书
医德医风自我评价2015
2015/03/03 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python