js实现模糊匹配功能

功能描述：

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

功能实现：

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

功能实现：

 
 
   
    #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; 
    } 
   
 
 
 
 
  
 
    
项目名称
 
    
时间
 
  
 
  
 
    
redPackets
 
    
2017.2.6
 
  
 
  
 
    
traffic
 
    
2016.12.25
 
  
 
  
 
    
creditCard
 
    
2017.1.18
 
  
 
  
 
    
returnMoney
 
    
2016.11.25
 
  
 
 
 
 
 

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

 
 
   
    #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; 
    } 
   
 
 
   
 
  
 
    
A
 
    
Angel
 
    
Adobe
 
    
Anne
 
 
    
B
 
    
Betty
 
    
Bella
 
    
Brown
 
 
    
C
 
    
Calvin
 
    
Chris
 
    
Claire
 
 
    
D
 
    
David
 
    
Daniel
 
    
Dora
 
 
    
E
 
    
Emily
 
    
Elena
 
    
Eufemia
 
  
 
 
 
 

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