JS實現搜索模糊匹配

 

Js代碼

<script type="text/javascript">
    var websites = [["1231","賬上1","1342333111"],["1232","賬上2","452354234234"],["1233","賬上3","33333344444"],["1234","賬上4","55555555"]
    ];
    $(function() {

//使得下拉框的寬度和輸入框保持一致
        $("#schname").css("width",$("#named").width());

//監聽輸入框
        $("#named").keyup(function (){
            var html="";
            if($("#named").val().length>0){

                var len=websites.length>10?10:websites.length;//最多顯示10行
                for(var i=0;i< len;i++){
                    if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
                    {
                        html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td style='color: blue;font-weight: bold'>"+websites[i][1]+"</td><td style='color: pink;font-weight: bold'>"+websites[i][2]+"</td></tr>";
                    }
                    else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())<0)
                    {
                        html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td style='color: blue;font-weight: bold'>"+websites[i][1]+"</td><td >"+websites[i][2]+"</td></tr>";
                    }
                    else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
                    {
                        html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td >"+websites[i][1]+"</td><td style='color: pink;font-weight: bold'>"+websites[i][2]+"</td></tr>";
                    }
                    else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
                    {
                        html+="<tr><td >"+websites[i][0]+"</td><td style='color: blue;font-weight: bold'>"+websites[i][1]+"</td><td style='color: pink;font-weight: bold' >"+websites[i][2]+"</td></tr>";
                    }

                    else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())<0)
                    {
                        html+="<tr><td>"+websites[i][0]+"</td><td  style='color: blue';>"+websites[i][1]+"</td><td font-weight: bold'>"+websites[i][2]+"</td></tr>";
                    }
                    else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())<0)
                    {
                        html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td >"+websites[i][1]+"</td><td >"+websites[i][2]+"</td></tr>";
                    }
                    else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
                    {
                        html+="<tr><td >"+websites[i][0]+"</td><td >"+websites[i][1]+"</td><td style='color: pink;font-weight: bold'>"+websites[i][2]+"</td></tr>";
                    }

                }
                if($("#schname").html()==""){
                    html+="<tr><td >無對應用戶</td></tr>";
                }
                $("#schname").html(html);
                $("#schname").css("display","table");
            }else{
                $("#schname").css("display","none");
            }

        });

//      這里是點擊事件處理
        $('#schname').on('click', 'tr', function() {

            if($(this).text()=="無對應用戶"){
                return;//沒有匹配值返回否則做相應處理
            }
            $("#named").val($(this).text());
            $("#schname").css("display","none");
        });

    });
</script>

當然筆者寫的有點繁雜，其實html="<tr></tr>"所有段都可以封裝成一個函數，返回一個模板精簡化，（這是區分一個程序員代碼和思路好壞的重要標准，這是你我的必經之路【大牛除外】）。到時只需要調用該函數即可；

　　

CSS代碼：

 }
        #schname{

            background-color:#ffffff;
            border: 1px solid #e4e4e4;
            /*height: 30px;*/
            position: absolute;
            /*display: none;*/
            z-index: 9999999;
        }


        #schname tr:hover{
            background-color: #e4e4e4;
            cursor: pointer;
        }
        #schname tr td{

            padding-right: 30px;
        }

　　

 

再來看看HTML

 <div >
        <div class="seachgroup">
            <input type="text" id="named" style="width: 400px">
            <table  id="schname" >

            </table>
        </div>
    </div>

數據格式：

 var websites = [["123","1239","1342333111"],["1234","賬上","452354234234"],["1235","賬上","33333344444"],["1236","賬上","55555555"]
    ];

效果

 

當然，有個更簡單的插件叫做jquery-ui    autocomplete  大家可以百度一下使用非常簡單。