jQuery 模糊搜索

心系少时言 等一不归人

html代码：

//搜索栏

    
    


//搜索内容

    
南京理工
    
华师大
    
合工大
    
哈工大
    
复旦
    
清华
    
同济
    
南开
    
中山
    
南航
    
武汉

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();

效果如下：

搜索页面布局

实现的模糊搜索效果