JavaScript在表格中模拟搜索多关键词搜索和筛选

　　模拟搜索需要实现以下功能：

　　1、用户的模糊搜索不区分大小写，需要小写字母匹配同样可以匹配到该字母的大写单词。

　　2、多关键词模糊搜索，假设用户关键词以空格分隔，在关键词不完整的情况下仍然可以匹配到包含该关键字的表格。

　　3、表格筛选，符合条件的表格展现，不符合条件的表格隐藏。

<!doctype html>
<html>
<head>
<title>表格搜索</title>
<meta charset="utf-8">
<style>
html{font-family:楷体;}
</style>
</head>
<body>
姓名：<input id='name' type='text'/>
<input id='btn1' type='button' value='搜索'/>
<table id='tab1'  border="1" width="500" >
    <thead>
        <tr><td>ID</td><td>姓名</td><td>年龄</td></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>阿童木</td><td>30</td></tr>
        <tr><td>2</td><td>机器猫</td><td>44</td></tr>
        <tr><td>3</td><td>小叮当</td><td>53</td></tr>
        <tr><td>4</td><td>海雅</td><td>69</td></tr>
        <tr><td>5</td><td>祖鲁</td><td>27</td></tr>
        <tr><td>6</td><td>JavaScript权威指南</td><td>28</td></tr>
    </tbody>
</table>
</body>
</html>

　　【1、用户的模糊搜索不区分大小写，需要小写字母匹配同样可以匹配到该字母的大写单词。】思路：由于JS区分大小写，需要将用户输入值与表格中的innerHTML值均转换为小写形式，再进行匹配，实现模糊匹配效果。函数toLowerCase()把字符串转换为小写。

　　JavaScript代码：

window.onload=function()
{
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function()
    {
        for(var i=0;i<oTab.tBodies[0].rows.length;i++)
        {
            oTab.tBodies[0].rows[i].style.display='none';
            if(oTxt.value.toLowerCase()==oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase())
            {
                oTab.tBodies[0].rows[i].style.display='block';
            }
        }
    }

};

　　【2、多关键词模糊搜索，假设用户关键词以空格分隔，在关键词不完整的情况下仍然可以匹配到包含该关键字的表格。】思路：搜索词通过split()函数进行分割，每个切割的单元search()函数检测是否在表格单元的字符串值中存在。

window.onload=function()
{
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function()
    {
        for(var i=0;i<oTab.tBodies[0].rows.length;i++)
        {   
            oTab.tBodies[0].rows[i].style.display='none';
            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();    
            var sTxt=oTxt.value.toLowerCase();
            var arr=sTxt.split(' ');
            for(var j=0;j<arr.length;j++)
            {
                if(sTab.search(arr[j])!==-1)
                {
                   oTab.tBodies[0].rows[i].style.display='block';
                }
            }
        }    
    }
};

　　错误的JavaScript代码

 oBtn.onclick=function()
    {
        for(var i=0;i<oTab.tBodies[0].rows.length;i++)
        {
            oTab.tBodies[0].rows[i].style.display='none';
            var sTxt=oTxt.value.toLowerCase().split(' ');
            if(oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().search(sTxt)!==-1)
            {
                oTab.tBodies[0].rows[i].style.display='block';
            }
        }

　　(a)split()函数切割获得由一连串字符串组成的数组。search()函数内的参数为需要检索的字符串。(b)for循环内嵌套for循环时，若嵌套的for循环中包含两个循环参数，需要注意嵌套的循环若定义变量与外部循环相同可能导致的逻辑问题。

JavaScript在表格中模拟搜索多关键词搜索和筛选

猜你喜欢