JQuery implements an in-page search and positioning function

 Because the front-end design page needs to implement an in-page search function to achieve the "Search Suggestion" effect. This function is not suitable for retrieval with too large data set, it is only a local retrieval function of the data list in the page.

 

The implementation idea is to traverse each div node through the JQuery loop, and display the div after the keyword is successfully matched, otherwise hide the div.

 

1. All search nodes need to be rendered in HTML

The HTML code is as follows:

<div class="input-group">
    <input id="search-text" type="text" class="form-control input-sm" onkeyup="return searchKeyPress(window.event);" placeholder="点击这里检索">
</div>

<div class="list-group comp-list" id="node-option-show">
    <div class="list-group-item" keywords="freeChargeLabel">
        <i class="fa fa-comment fa-fw"></i> freeChargeLabel<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="arrayquantity">
        <i class="fa fa-comment fa-fw"></i> arrayquantity<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="tbGold">
        <i class="fa fa-comment fa-fw"></i> tbGold<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="payInfo">
        <i class="fa fa-comment fa-fw"></i> payInfo<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="itemInfo">
        <i class="fa fa-comment fa-fw"></i> itemInfo<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="orderInfo">
        <i class="fa fa-comment fa-fw"></i> orderInfo<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="rightPush">
        <i class="fa fa-comment fa-fw"></i> rightPush<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="rebateTip">
        <i class="fa fa-comment fa-fw"></i> rebateTip<span class="pull-right text-muted small"></span>
    </div>
    <div class="list-group-item" keywords="safeTips">
        <i class="fa fa-comment fa-fw"></i> safeTips<span class="pull-right text-muted small"></span>
    </div>
</div>

 

Second, the JS code is as follows:

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) {
        searchText = searchText.toLowerCase ();
        $("#node-option-show .list-group-item").each(function () {
            var dataVal = $(this).attr("keywords");
            dataVal = dataVal.toLowerCase();
            if (dataVal.indexOf(searchText) <= -1) {
                $(this).hide();
            }
        });
    } else {
        $("#domain-list-show .domain-info").each(function () {
            $(this).show();
        })
    }
}