jquery实现模糊查询

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

html

<div class="warp">
    
    <div class="search_box">
        <input type="text" id="search_input " placeholder="请输入搜索内容">
        <i class="search_icon"></i>
    </div>

    
    <div class="search_default" id="search_content ">
        <ul>
            <li>南京理工</li>
            <li>华师大</li>
            <li>合工大</li>
            <li>哈工大</li>
            <li>复旦</li>
            <li>清华</li>
            <li>同济</li>
            <li>南开</li>
            <li>中山</li>
            <li>南航</li>
            <li>武汉</li>
        </ul>
    </div>
</div>

JS

$(function() {

第一种

//jq模糊查询
sc.dimSearch=function(input,content){
    var search_input = $("#"+input),
        search_content = $("#"+content);
    search_input.on("keyup", function() {
        if (search_input.val() == '') {
            search_content.show();
        }
        $("#"+content+" li:contains(" + search_input.val().trim() + ")").show();
        $("#"+content+" li:not(:contains(" + search_input.val().trim() + "))").hide();
    })
}

        //第二中方法
        //$("#search_content li").hide().filter(":contains("+ search_input.val().trim() +")").show();
    });
});