jQuery模糊查询

手头一个项目用到模糊查询姓名，数据是后台给的，但这个功能没做过，查询了相关资料，觉得其实挺简单的。
首先拿到后台给过来的数据数组，类似：[id:10011 , name:张三 , zs , zhangsan] 这样一个数组，因为想要快速实现就写成了这种形式：

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

直接遍历数组应该也能实现，不过我觉得这种相对来说比较简单。
然后就是查询的代码了：

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的输入监听事件，input是其它浏览器
            $(".inputPhoto").on("input propertychange", function () {
                $(".inQuire li")
                    .hide()
                    .filter(":contains('" + that.val().toLocaleLowerCase() + "')")//小写
                    .show();
            });
        });
 /****模糊查询  END****/