非常實用的jQuery模糊查詢
阿新 • • 發佈:2018-11-27
html部分
<div class="warp"> <div class="search_box"> <input type="text" placeholder="請輸入搜尋內容"> <i class="search_icon"></i> </div> <div class="search_content search_default"> <ul> <li>南京理工</li> <li>華師大</li> <li>合工大</li> <li>哈工大</li> <li>復旦</li> <li>清華</li> <li>同濟</li> <li>南開</li> <li>中山</li> <li>南航</li> <li>武漢</li> </ul> </div> </div> js部分 $(function() { var search_input = $(".search_box input"), search_content = $(".search_content"); $(search_input).on("keyup", function() { if (search_input.val() == '') { $(search_content).show(); } $(".search_content li:contains(" + search_input.val().trim() + ")").show(); $(".search_content li:not(:contains(" + search_input.val().trim() + "))").hide(); //第二中方法 //$(".search_content li").hide().filter(":contains("+ search_input.val().trim() +")").show(); }); }); css部分略