Question

我有一个显示方框列表的页面，当我搜索一次它完美地给我结果时，当我再次搜索时，什么都没有显示

搜索框：

<form class="search-form">
  <input type="text" id="searchfield" class="input-medium search-query" placeholder="Search">
  <button type="submit" class="btn">Search</button>
</form>

HTML：

<div class="col-md-4 col-sm-6">
  <div class="mybox">
    <div data-title="Titleshoudbehere" class="myitem">
      <a target="_blank">

        <div class="mytitle">
          <p>Title is here</p>

        </div>

        <div class="footer">
          <p>#hashtag </p>
        </div>
      </a>

    </div>
  </div>
</div>

JS：

$('.search-form').on('submit', function() {
  return false;
});


$('.search-form .btn').on('click', function(e) {
  var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
  $('div.mybox .mytitle').each(function() {
    var $this = $(this);
    if ($this.text().toLowerCase().indexOf(query) === -1)
       $this.closest('div.col-md-4.col-sm-6').fadeOut();
    else   $this.closest('div.col-md-4.col-sm-6').fadeIn();
  });
});

Answer 1

我只是将您的代码复制粘贴到一个代码段中，它似乎工作正常。

尝试输入“标题”，然后输入“Foo”，然后再输入“标题”，例如：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search-form">
  <input type="text" id="searchfield" class="input-medium search-query" placeholder="Search">
  <button type="submit" class="btn">Search</button>
</form>

<div class="col-md-4 col-sm-6">
  <div class="mybox">
    <div data-title="Titleshoudbehere" class="myitem">
      <a target="_blank">

        <div class="mytitle">
          <p>Title is here</p>

        </div>

        <div class="footer">
          <p>#hashtag </p>
        </div>
      </a>

    </div>
  </div>
</div>

搜索表单只能运行一次

1 个答案: