<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--查询输入框--> <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--> </body> </html> <script src="../jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /****模糊查询****/ $(".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****/ </script>
前端搜索功能(四)
猜你喜欢
转载自blog.csdn.net/M_SSY/article/details/80492476
今日推荐
周排行