html 模糊匹配,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

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";

}

}

}

}

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

#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

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";

}

}

}

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