Question

我正在尝试在同一页面中对<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /> <link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script> <ul class="owl-carousel"> <li> <video id="myVideo"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> </li> <li> <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="pic_mountain" style="height:250px" /> </li> </ul>进行JavaScript搜索。我目前正在使用此代码显示我的搜索查询：

div

以下是HTML和CSS示例的演示：

DEMO

所以我想在用户仍在输入时显示$('.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(); }); });。我知道有一个刷新功能，但我无法理解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/

Answer 2

你想要的吗？你只需要倾听＆＃39;输入＆＃39;事件而非点击。

$('.form-search .search-query').on('input', function(e){ ... });

http://jsfiddle.net/817tfr03/

Answer 3

您可以使用搜索字段上的keyup（）函数作为触发器，而不是单击（）。

与所做的here

类似

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

3 个答案: