jquery实现模糊查询<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
jquery实现模糊查询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ font-family:Arial,"microsoft Yahei"; } ul,li{ margin: 0; padding: 0; list-style-type: none; } .serach{ margin-right: 30px; position: relative; top: 100px; left: 200px; float: left; } .serach input:focus ~ ul{ display: block; } .serach input{ height: 30px; line-height: 30px; width: 300px; border-radius: 10px; text-indent:10px; padding-left: 15px; font-weight: 900; } .serach ul{ position: absolute; border: 1px solid #abcdef; border-top:none; width: 300px; display: none; } .serach ul li{ text-align: center; } .serach ul li:hover{ background-color: #abcdef; } .serach ul li.noserach{ } .serach ul li.noserach:hover{ background-color: #abcdef; } </style></head><body><div class="serach"> <input type="text" name="text"> <ul> <li>鲁西</li> <li>你西</li> <li>我西</li> </ul></div><div class="serach"> <input type="text" name="text"> <ul> <li>小样</li> <li>你好吗</li> <li>我不好</li> </ul></div><script src="jquery/jquery-2.2.4.js"></script><script> $(function () { //为了提高效率只检索一变 $('.serach input').on("keyup",function () { var $ul=$(this).next(); $ul.find(".noserach").remove(); //包含选择器：contains， var $results=$ul.find("li").hide().filter(":contains('"+this.value+"')").show(); if(!$results.length){ $ul.append("<li class='noserach'>无法查找</li>") } }).next().find("li").on("mouseenter",function () { $(this).parent().prev().val(this.innerHTML); }) });</script></body></html>