zoukankan      html  css  js  c++  java
  • 动态自动搜索 Dynamic search (js版)

    1 2 3 
    HTML:
    <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;
    }
     
     
  • 相关阅读:
    Alpha阶段项目复审
    复审与事后分析
    测试与发布(Alpha版本)
    第七天
    第六天
    团队作业第4周——项目冲刺
    第一天
    第二天
    第四天
    第五天
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/1625171.html
Copyright © 2011-2022 走看看