jQuery 模糊搜尋

風暴阿呆發表於2017-12-14

html程式碼:

//搜尋欄
<div class='search_box'>
    <input type='text' placeholder='請輸入搜尋內容'>
    <i class='search_icon'></i>
</div>

//搜尋內容
<div class='search_content'>
    <p class='text'>南京理工</p>
    <p class='text'>華師大</p>
    <p class='text'>合工大</p>
    <p class='text'>哈工大</p>
    <p class='text'>復旦</p>
    <p class='text'>清華</p>
    <p class='text'>同濟</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();複製程式碼

jQuery 模糊搜尋

jQuery 模糊搜尋


相關文章