js实现模糊匹配功能
程序员文章站
2023-11-22 16:10:34
功能描述:
在搜索框中输入某一个字段,可以查询到相关的内容
功能实现:
1. 先声明变量用于保存输入框以及表格里面的内容
2. ...
功能描述:
在搜索框中输入某一个字段,可以查询到相关的内容
功能实现:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: MYSQL 小技巧 -- LAST_INSERT_ID
下一篇: DOM事件探秘篇