手頭一個(gè)項(xiàng)目用到模糊查詢姓名，數(shù)據(jù)是后臺(tái)給的，但這個(gè)功能沒(méi)做過(guò)，查詢了相關(guān)資料，覺(jué)得其實(shí)挺簡(jiǎn)單的。
首先拿到后臺(tái)給過(guò)來(lái)的數(shù)據(jù)數(shù)組，類似：[id:10011 , name:張三 , zs , zhangsan] 這樣一個(gè)數(shù)組，因?yàn)橄胍焖賹?shí)現(xiàn)就寫成了這種形式：

<li><span class="inQuireID">1011</span><span class="inQuireName">張三</span><span class="inQuireBig">ZS</span><span class="inQuireSmall">zhangshan</span></li>

直接遍歷數(shù)組應(yīng)該也能實(shí)現(xiàn)，不過(guò)我覺(jué)得這種相對(duì)來(lái)說(shuō)比較簡(jiǎn)單。
然后就是查詢的代碼了：

html：

<!--查詢輸入框-->
<div class="taskBlock"><input class="inputPhoto inputBox" type="text"></div>

<!--模糊查詢代碼體-->
            <div class="inQuire">
                <ul class="inQuireUl">
                    <li><span class="inQuireID">1011</span><span class="inQuireName">張三</span><span class="inQuireBig">ZS</span><span class="inQuireSmall">zhangshan</span></li>
                    <li><span class="inQuireID">1012</span><span class="inQuireName">李四</span><span class="inQuireBig">LS</span><span class="inQuireSmall">lisi</span></li>
                    <li><span class="inQuireID">1013</span><span class="inQuireName">王五</span><span class="inQuireBig">WW</span><span class="inQuireSmall">wangwu</span></li>
                </ul>
            </div>
            <!--模糊查詢代碼體 END-->

jQuery：

 /****模糊查詢****/
        $(".inputPhoto").on("focus", function () {
            var that = $(this);
            //顯示列表
            $(".inQuire").show();
            //輸入實(shí)時(shí)查詢事件，propertychange是IE的輸入監(jiān)聽事件，input是其它瀏覽器
            $(".inputPhoto").on("input propertychange", function () {
                $(".inQuire li")
                    .hide()
                    .filter(":contains('" + that.val().toLocaleLowerCase() + "')")//小寫
                    .show();
            });
        });
 /****模糊查詢  END****/