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

我正在尝试在同一页面中对

div

进行JavaScript搜索。我当前正在使用此代码显示我的搜索查询：

$('.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示例的演示：

因此，我想在用户仍在键入时显示

div

。我知道有一个刷新函数，但我就是不懂JavaScript。我是个新手。

你想要吗？ 您只需收听“输入”事件，而不是单击

$（'.form search.search query'）。关于（'input'，函数（e）{…}）

您可以使用searchfield上的keyup（）函数作为触发器，而不是click（）

与此类似
通过一些重构，您既可以处理单击搜索按钮，也可以在输入文本时更新搜索结果。这应该起作用：

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

更新的JSFIDLE: