Jquery简单实现前端搜索功能

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

<div id="show">
<div class="item">itemA</div>
<div class="item">itemB</div>
<div class="item">itemC</div>
<div class="item">itemD</div>
<div class="item">itemE</div>
<div class="item">.......</div>
<div class="item">itemZ</div>
<div>

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

<div id="show">
<div class="item">itemE</div>
<div>

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

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

<div id="hidden" style="display:none">
<div class="item">itemA</div>
<div class="item">itemB</div>
<div class="item">itemC</div>
<div class="item">itemD</div>
<div class="item">itemE</div>
<div class="item">.......</div>
<div class="item">itemZ</div>
<div>

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

<input type="text" placeholder="搜索内容.." onkeyup="return searchKeyPress(window.event)" id="search-text">

 

添加搜索的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 + "<div class='item'>" + $(this).html() + "</div>";
            }
        })
        if(html != ""){
            $("#show").html(html);
        }
    } else {
        $("#show").html($("#hidden").html());
    }
}

 

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