javascript - 如何在用户仍在键入时在同一页面上使用 JavaScript 搜索？

Question

我正在尝试使用 JavaScript 在同一页面中搜索 div。我目前正在使用此代码来显示我的搜索查询:

$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
    $('div.staff-container .bold').each(function(){
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('div.staff-container').fadeOut();
        else $this.closest('div.staff-container').fadeIn();
    });
});

这是一个使用 HTML 和 CSS 的示例演示:

DEMO

所以我想在用户仍在输入时显示 div。我知道有一个刷新功能，但我就是看不懂 JavaScript。我是新手学生。

Answer 1

通过一些重构，您既可以处理“搜索”按钮上的点击，又可以在您输入文本时更新搜索结果。这应该有效:

function updateResults() {
    var query = $.trim($('.search-query').val()).toLowerCase();
    $('div.staff-container .bold').each(function(){
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('div.staff-container').fadeOut();
        else $this.closest('div.staff-container').fadeIn();
    });
}

$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', updateResults);
$('.search-query').on('input', updateResults);

更新的 Jsfiddle:http://jsfiddle.net/1w8L0oeq/