前端js實現(xiàn)本地模糊搜索

很多時候我們做模糊查詢是傳關(guān)鍵字給后臺請求后臺接口，但是有時候一些輕量級的列表前端來做可以減少ajax請求，在一定程度上提高用戶體驗。
例如搜索課程名稱，首先我們將課程名稱json數(shù)據(jù)存在本地，然后通過將關(guān)鍵字與目標檢索數(shù)組進行匹配，將符合條件的對象返回并渲染顯示在前端，這樣就達到了我們本地模糊查詢的目的。


模糊查詢的規(guī)則：
本例是首字母相同，并且包含搜索的所有關(guān)鍵字，例如輸入“計科”，返回計算機科學與技術(shù)。

    /**檢查一個字符串是否包含在另一個字符串里,并且首字符相同
     * i:計算機科學與技術(shù)
     * j:計科
     * 返回true
     * */
    function checkStrContain(i, j) {
        if(!i || !j){
            return false;
        }
        if(i.charAt(0) != j.charAt(0)){
            return false;
        }
        i = i.substr(1,i.length-1);
        j = j.substr(1,j.length-1);
        var a;
        var b;
        if (i.length > j.length) {
            a = i;
            b = j;
        } else {
            a = j;
            b = i;
        }
        var count = 0;
        for (var bi = 0; bi < b.length; bi++) {
            var bArr = b.split("");
            if (a.indexOf(bArr[bi]) != -1) {
                count++;
            } else {
                break;
            }
        }
        if (b.length == count) {
            return true;
        } else {
            return false;
        }
    }

根據(jù)搜索關(guān)鍵字返回符合條件的數(shù)組：

/**
     * 根據(jù)字符串模糊搜索返回符合條件的數(shù)據(jù)
     * name   搜索字符串
     * array  檢索json數(shù)組
     * length 匹配結(jié)果最大長度
     */
    function getArrayByName(name,array,length){
        if(array.length < 1){
            return;
        }
        var result = [];
        for (var key in array) {
            if (checkStrContain(array[key].name,name) && result.length<length) {
                result.push(array[key])
            }
        }
        return result
    }

按下鍵盤時進行檢索，查找符合條件的數(shù)據(jù)，選擇下拉選項后回填輸入框：

 $(function(){
            /**按下鍵盤時搜索*/
            $("body").undelegate("input", "keyup").delegate("input", "keyup", function() {
                var name = $(this).val().replace(/\s+/g, "");
                if(name.length>0){
                    var resultArray = getArrayByName(name,jsonArr,6);
                    if(resultArray.length<1){
                        $(this).next("ul").hide();
                    }else{
                        var html = "";
                        for(var i=0;i<resultArray.length;i++){
                            html += "<li>"+resultArray[i].name+"</li>";
                        }
                        $(this).next("ul").html(html).show();
                    }
                }
            })
            /**下拉列表展開時點擊li的事件,為輸入框賦值*/
            $(".input-search").on("click","ul li",function(){
                $(this).parent("ul").siblings("input").val($(this).text());
                $(this).parent("ul").hide();
            });
        })

完整代碼(包含樣式)：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .input-search{
            position: relative;
            margin: 100px auto;
            width: 200px;
        }
        input{
            width: 200px;
            height: 30px;
            padding-left: 10px;
            padding-right: 10px;
            background-color: #ffffff;
            border: solid 1px #e5e5e5;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            outline: none;
            -webkit-appearance:none;
            appearance: none;
        }
        ul{
            display: none;
            position: absolute;
            top: 29px;
            width: 100%;
            border: solid 1px #62a6da;
            max-height: 340px;
            overflow-y: auto;
            z-index: 1;
            font-size: 0;
        }
        ul li{
            position: relative;
            padding-left: 10px;
            width: 100%;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            color: #454545;
            text-align: left;
            background-color: #fff;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        ul li:hover{
            color: #fff;
            background-color: #1c9dff;
        }
    </style>
</head>
<body>
    <div class="input-search">
        <input type="text" placeholder="請輸入課程名稱">
        <ul></ul>
    </div>
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.2.min.js" ></script>
    <script>
        $(function(){
            /**按下鍵盤時搜索*/
            $("body").undelegate("input", "keyup").delegate("input", "keyup", function() {
                var name = $(this).val().replace(/\s+/g, "");
                if(name.length>0){
                    var resultArray = getArrayByName(name,jsonArr,6);
                    if(resultArray.length<1){
                        $(this).next("ul").hide();
                    }else{
                        var html = "";
                        for(var i=0;i<resultArray.length;i++){
                            html += "<li>"+resultArray[i].name+"</li>";
                        }
                        $(this).next("ul").html(html).show();
                    }
                }
            })
            /**下拉列表展開時點擊li的事件,為輸入框賦值*/
            $(".input-search").on("click","ul li",function(){
                $(this).parent("ul").siblings("input").val($(this).text());
                $(this).parent("ul").hide();
            });
        })

        var jsonArr = [
            {
                "name":"計算機組成原理"
            },
            {
                "name":"計算機網(wǎng)絡"
            },
            {
                "name":"數(shù)據(jù)結(jié)構(gòu)"
            },
            {
                "name":"網(wǎng)頁程序設計"
            },
            {
                "name":"嵌入式開發(fā)"
            },
            {
                "name":"高等數(shù)學"
            },
            {
                "name":"計算機應用技術(shù)"
            },
            {
                "name":"計算機科學與技術(shù)"
            }
        ]
    /**
     * 根據(jù)字符串模糊搜索返回符合條件的數(shù)據(jù)
     * name   搜索字符串
     * array  檢索json數(shù)組
     * length 匹配結(jié)果最大長度
     */
    function getArrayByName(name,array,length){
        if(array.length < 1){
            return;
        }
        var result = [];
        for (var key in array) {
            if (checkStrContain(array[key].name,name) && result.length<length) {
                result.push(array[key])
            }
        }
        return result
    }
    /**檢查一個字符串是否包含在另一個字符串里,并且首字符相同
     * i:計算機科學與技術(shù)
     * j:計科
     * 返回true
     * */
    function checkStrContain(i, j) {
        if(!i || !j){
            return false;
        }
        if(i.charAt(0) != j.charAt(0)){
            return false;
        }
        i = i.substr(1,i.length-1);
        j = j.substr(1,j.length-1);
        var a;
        var b;
        if (i.length > j.length) {
            a = i;
            b = j;
        } else {
            a = j;
            b = i;
        }
        var count = 0;
        for (var bi = 0; bi < b.length; bi++) {
            var bArr = b.split("");
            if (a.indexOf(bArr[bi]) != -1) {
                count++;
            } else {
                break;
            }
        }
        if (b.length == count) {
            return true;
        } else {
            return false;
        }
    }
</script>
</body>
</html>

原文作者技術(shù)博客：http://www.itdecent.cn/u/ac4daaeecdfe

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容