动态自动搜索 Dynamic search (js版)

最新推荐文章于 2024-03-24 20:39:50 发布

weixin_34072637

最新推荐文章于 2024-03-24 20:39:50 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zengxiangzhan/archive/2009/12/15/1625171.html

本文介绍了一种通过JavaScript实现的文章过滤功能，可以根据输入的关键词实时显示匹配的文章标题，未匹配的文章将被暂时隐藏。该方法使用了定时器来避免频繁触发页面重绘，提高了用户体验。

<input  id="titleFilter" onkeyup="ApplyFilter('artTitle','titleFilter');" />

<TABLE >

<TBODY>
<TR >
<TD >17</TD>
<TD ><a href="#" name="artTitle">Alice Mutton</a></TD>

</TR>

<TR >
<TD >17</TD>
<TD ><a href="#" name="artTitle">Alice Mutton</a></TD>

</TR>

</TBODY>

</TABLE>

JS:

var prevVal = null,timeoutId = null,slp=200,inproc=false;

function ApplyFilter(name,title){
    var filter = document.getElementById(title);
    if(timeoutId)
        window.clearTimeout(timeoutId);
    if(filter){   
        timeoutId = setTimeout("ShowFilteredArticles('" + filter.value + "','" + name + "')", slp);
    }
}

function ShowFilteredArticles(value, name)
{
    if(inproc) return;
    if(prevVal == value) return; else prevVal = value;
    inproc=true;
    var row,elems = document.getElementsByName(name);
    if(elems){
        var words = value.split(" ");
        var res = new Array(); 
        for(var i=0;i<words.length;i++)
            if (words[i].replace(" ","").length>0) 
                res.push(new RegExp("(?:.)*" + words[i] + "(?:.)*", "i"));

        for(var i = 0; i < elems.length; i++){
            var title = elems[i].innerHTML;
            var matched=true;
            if (res.length > 0) 
                for(var j=0;j<res.length;j++) if (!res[j].test(title)) {matched=false;break;}
            if(matched){
                row = elems[i].parentNode;
                while(row && row.tagName != "TR")row = row.parentNode;
                if(row && row.tagName == "TR")row.style.display = "";    
            }
            else{
                row = elems[i].parentNode;
                while(row && row.tagName != "TR")row = row.parentNode;
                if(row && row.tagName == "TR")row.style.display = "none";
            }
        }
    }
    inproc=false;
}