心系少時(shí)言 等一不歸人
html代碼：
//搜索欄
<div class='search_box'>
<input type='text' placeholder='請輸入搜索內(nèi)容'>
<i class='search_icon'></i>
</div>
//搜索內(nèi)容
<div class='search_content'>
<p class='text'>南京理工</p>
<p class='text'>華師大</p>
<p class='text'>合工大</p>
<p class='text'>哈工大</p>
<p class='text'>復(fù)旦</p>
<p class='text'>清華</p>
<p class='text'>同濟(jì)</p>
<p class='text'>南開</p>
<p class='text'>中山</p>
<p class='text'>南航</p>
<p class='text'>武漢</p>
</div>
js代碼：
var search_input = $(".search_box input"),
search_content = $(".search_content");
$(search_input).on("keyup", function(){
if(search_input.val() == ''){
$(search_content).show();
}
$(".search_content p:contains("+ search_input.val().trim() +")").show();
$(".search_content p:not(:contains("+ search_input.val().trim() +"))").hide();
方法二 將 js 后兩句代碼改為：
$(".search_content p").hide().filter(":contains("+ search_input.val().trim() +")").show();
效果如下：
搜索頁面布局
實(shí)現(xiàn)的模糊搜索效果
