今天头条入局小程序_js完成模糊匹配功用

2021-01-12 14:04 jianzhan
js实现模糊匹配功能       这篇文章主要为大家详细介绍了js实现模糊匹配功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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-colla凡科抠图e: colla凡科抠图e; 
 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" 
 th 项目名称 /th 
 th 时间 /th 
 /tr 
 td redPackets /td 
 td 2017.2.6 /td 
 /tr 
 td traffic /td 
 td 2016.12.25 /td 
 /tr 
 td creditCard /td 
 td 2017.1.18 /td 
 /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="#" A /a /li 
 li a href="#" Angel /a /li 
 li a href="#" Adobe /a /li 
 li a href="#" Anne /a /li 
 li a href="#" B /a /li 
 li a href="#" Betty /a /li 
 li a href="#" Bella /a /li 
 li a href="#" Brown /a /li 
 li a href="#" C /a /li 
 li a href="#" Calvin /a /li 
 li a href="#" Chris /a /li 
 li a href="#" Claire /a /li 
 li a href="#" D /a /li 
 li a href="#" David /a /li 
 li a href="#" Daniel /a /li 
 li a href="#" Dora /a /li 
 li a href="#" 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 

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