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接收get传递的值的代码
Nov 30 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
ES6中字符串的使用方法扩展
Jun 04 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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针对数字的加密解密类
2014/03/20 PHP
php创建无限级树型菜单
2015/11/05 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python如何写try语句
2020/07/14 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
大学生创业计划书的范文
2014/01/07 职场文书
教师绩效考核方案
2014/01/21 职场文书
党建工作经验交流材料
2014/05/25 职场文书
员工保密承诺书
2014/05/28 职场文书
标准毕业生自荐信
2014/06/24 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
实习生矿工检讨书
2014/10/13 职场文书
教师个人发展总结
2015/02/11 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
python字符串常规操作大全
2021/05/02 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android