js实现模糊匹配功能

功能描述：

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

功能实现：

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript正则表达式模糊匹配IP地址功能示例

    本文实例讲述了javascript正则表达式模糊匹配IP地址功能.分享给大家供大家参考,具体如下: function checkip() { var strIP = document.getElementById("accessip").value; var re = /^(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)$/g //模糊匹配IP地址的正则表达式 if(re.test(strIP)){ if(RegExp.$1

  • JS仿百度自动下拉框模糊匹配提示

    JS仿百度自动下拉框模糊匹配提示

    实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

  • js实现模糊匹配功能

    功能描述: 在搜索框中输入某一个字段,可以查询到相关的内容 功能实现: 1.  先声明变量用于保存输入框以及表格里面的内容 2.  循环遍历 遍历表格每一行,查找匹配项 3.  判断 如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏 功能实现: <html> <head> <style> #myInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border

  • Vue文本模糊匹配功能如何实现

    模糊匹配功能在下拉菜单的组件中用的非常多,于是打算写几个demo看看细节上是如何实现的. 一.最简单的模糊匹配:计算属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

  • 正则表达式实现字符的模糊匹配功能示例

    本文实例讲述了正则表达式实现字符的模糊匹配功能.分享给大家供大家参考,具体如下: package com.cn.util; import java.util.regex.Pattern; /** * 正则表达式 工具类 * * @author lifangyu */ public class RegexUtil { /* * IP地址的匹配标达式 ( // \\d{1,3}) // :\d // 0~9数字,{1,3} // 至少一位,最多三位) */ private static String

  • Qt实现模糊匹配功能的实例详解

    Qt实现模糊匹配功能的实例详解

    目录 1.准备基础数据 2.创建并实例化匹配类 3.控件绑定 对于浏览器的使用,我想大家一定不会陌生吧,输入要搜索的内容时,会出现相应的匹配信息. 那么,今天我要讲述的也是这样一个功能. 首先看一下展示效果 输入任意文本后,弹出具有该文本的符合项,也就是模糊查询. 实现功能的核心是:QCompleter 该类可以在任何Qt小部件中提供自动完成搜索功能,例如:QLineEdit.QComboBox.当输入指定字符后,QCompleter会根据单词列表提供的内容进行筛查. 在这里,我是采用QLine

  • JQuery搜索框自动补全(模糊匹配)功能实现示例

    JQuery搜索框自动补全(模糊匹配)功能实现示例

    本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码 <!doctype html> <html lang="en"> <

  • IOS实现邮箱模糊匹配的功能

    IOS实现邮箱模糊匹配的功能

    先来看看要实现的效果图 一.介绍一下功能 当输入一个邮箱的数字,会默认在后面匹配出来@qq.com,当然这个默认@qq.com可以换成其他的如@163.com等等.这里默认是@qq.com,因为我们的产品汪做过统计大多数用户还是用的qq邮箱,所以默认是@qq.com. 当输入@符号还是不会有所变化,但是如果在@之后再输入字符,会将这个字符和你想要提示的邮箱后缀做匹配,我这里是需要匹配@qq.com,@163.com,@126.com,@yahoo.com,@139.com,@henu.com类型

  • jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例

    jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例

    本文实例讲述了jQuery简单实现的HTML页面文本框模糊匹配查询功能.分享给大家供大家参考,具体如下: 项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目中也已经使用上了,做了个小demo作为记录,有需要的自己复制代码改一改就好了. 使用在线HTML/css/JavaScript运行工具:http://tools.jb51.net/code/Html

  • JS中Select下拉列表类(支持输入模糊查询)功能

    下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY

随机推荐