Jquery简单实现前端搜索功能

 如果html页有很长的列表，我们自然想到了需要检索展示功能，本文用简单的方式实现了检索功能，首先是搜索的列表如下

itemA
itemB
itemC
itemD
itemE
.......
itemZ

功能要求：输入关键词D，检索出内容列表，比如输入E，检索出：

itemE

 输入空，检索出所有的内容

用一个隐藏的副本做为搜索源，内容如下：

itemA
itemB
itemC
itemD
itemE
.......
itemZ

 引入JQuery可以方便我们搜索，设定一个搜索的input

 

添加搜索的JS

function searchKeyPress(e){
    var keynum = window.event ? e.keyCode : e.which;
    if(13 == keynum
        || (keynum >= 65 && keynum <=90)
        || (keynum >= 97 && keynum <=122)
        || 8 == keynum){
        searchDomain();
    }
}

function searchDomain() {
    var searchText = $("#search-text").val();
    if(searchText != "" && searchText != null){
        var html = "";
        searchText = searchText.toLowerCase();
        $("#hidden .item").each(function(){
            var dataVal = $(this).text();
            dataVal = dataVal.toLowerCase();
            if(dataVal.indexOf(searchText) > -1){
                html = html + "
" + $(this).html() + "
";
            }
        })
        if(html != ""){
            $("#show").html(html);
        }
    } else {
        $("#show").html($("#hidden").html());
    }
}

 

记得用toLowerCase()，这样可以大小写模糊匹配，另外获取div内容的时候，用JQuery选择器不能获取整个html的内容，只能用这种本方法来拼接div了，html = html + "

" + $(this).html() + "

";