手頭一個項目用到模糊查詢姓名梦抢，數(shù)據(jù)是后臺給的愧哟，但這個功能沒做過哼蛆，查詢了相關(guān)資料霞赫，覺得其實挺簡單的。
首先拿到后臺給過來的數(shù)據(jù)數(shù)組萤厅，類似：[id:10011 , name:張三 , zs , zhangsan] 這樣一個數(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)該也能實現(xià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();
//輸入實時查詢事件主守，propertychange是IE的輸入監(jiān)聽事件，input是其它瀏覽器
$(".inputPhoto").on("input propertychange", function () {
$(".inQuire li")
.hide()
.filter(":contains('" + that.val().toLocaleLowerCase() + "')")//小寫
.show();
});
});
/****模糊查詢 END****/
