js实现模糊匹配功能
功能描述：
在搜索框中输入某一个字段，可以查询到相关的内容
功能实现：
1. 先声明变量用于保存输入框以及表格里面的内容
2. 循环遍历
遍历表格每一行，查找匹配项
3. 判断
如果输入框里面的内容跟表格中某个td的内容相似，则表格中的某行就显示，否则隐藏
功能实现：
<html>
<head>
<style>
#myInput{
width:100%;
font-size:16px;
padding:12px20px12px40px;
border:1pxsolid#ddd;
margin-bottom:12px;
}
#myTable{
border-collapse:collapse;
width:100%;
border:1pxsolid#ddd;
font-size:18px;
}
#myTableth,#myTabletd{
text-align:left;
padding:12px;
}
#myTabletr{
border-bottom:1pxsolid#ddd;
}
#myTabletr.header,#myTabletr:hover{
background-color:#f1f1f1;
}
</style>
</head>
<body>
<inputtype="text"id="myInput"onkeyup="myFunction()"placeholder="搜索...">
<tableid="myTable">
<trclass="header">
<thstyle="width:60%;">项目名称</th>
<thstyle="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>
functionmyFunction(){
//声明变量
varinput,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:12px20px12px40px;
border:1pxsolid#ddd;
margin-bottom:12px;
}
#myUL{
list-style-type:none;
padding:0;
margin:0;
}
#myULlia{
border:1pxsolid#ddd;/*链接添加边框*/
margin-top:-1px;
background-color:#f6f6f6;
padding:12px;
text-decoration:none;
font-size:18px;
color:black;
display:block;
}
#myULlia.header{
background-color:#5587A2;
cursor:default;
}
#myULlia:hover:not(.header){
background-color:#eee;
}
</style>
</head>
<body>
<inputtype="text"id="myInput"onkeyup="myFunction()"placeholder="搜索...">
<ulid="myUL">
<li><ahref="#"class="header">A</a></li>
<li><ahref="#">Angel</a></li>
<li><ahref="#">Adobe</a></li>
<li><ahref="#">Anne</a></li>
<li><ahref="#"class="header">B</a></li>
<li><ahref="#">Betty</a></li>
<li><ahref="#">Bella</a></li>
<li><ahref="#">Brown</a></li>
<li><ahref="#"class="header">C</a></li>
<li><ahref="#">Calvin</a></li>
<li><ahref="#">Chris</a></li>
<li><ahref="#">Claire</a></li>
<li><ahref="#"class="header">D</a></li>
<li><ahref="#">David</a></li>
<li><ahref="#">Daniel</a></li>
<li><ahref="#">Dora</a></li>
<li><ahref="#"class="header">E</a></li>
<li><ahref="#">Emily</a></li>
<li><ahref="#">Elena</a></li>
<li><ahref="#">Eufemia</a></li>
</ul>
<script>
functionmyFunction(){
//声明变量
varinput,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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。