Question

我正在尝试使用Bootstrap过滤器构建一个简单的常见问题解答页面，其中问题和答案保持在一起一旦过滤。

HTML：

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div class="row" id="myDIV">
    <div class="col-sm-6">
        <h4>Question is that</h4>
        <div class="lead faq-answer">Answer is that</div>

    </div>

    <div class="col-sm-6">
        <h4>Question is this</h4>

        <div class="lead faq-answer">Answer is this</div>
    </div>
</div>

的javascript：

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我试过将答案作为一个span元素包含在同一个div中，但似乎没有用，所以我怀疑它比我想象的要复杂。

示例：当我搜索“问题是那个”或“答案是那个”时，它应该同时显示问题和答案。

任何提示都表示赞赏。

Answer 1

＆＃13;

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".question-card").filter(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div class="container">
<div class="row" id="myDIV">
    <div class="col-sm-6">
       <div class="card question-card mb-2">
          <h4 class="question-title">ASDF</h4>
          <div class="lead faq-answer">Answer is asdf</div>
        </div>
    </div>

    <div class="col-sm-6">
     <div class="card question-card mb-2">
        <h4>Question is QWER</h4>
        <div class="lead faq-answer">qwer ansert</div>
     </div>
    </div>
    
    <div class="col-sm-6">
     <div class="card question-card mb-2">
        <h4>Question ZXCV</h4>
        <div class="lead faq-answer">Answer zxcv</div>
     </div>
    </div>
    
    
</div>
</div>

＆＃13;

Answer 2

filter()回调函数需要一个布尔返回值。

您可以执行以下操作：

$("#myInput").on("keyup", function() {
  var value = $(this).val().trim().toLowerCase();  //Get the value trim and make lowercase

  $("#myDIV>div").show().filter(function() {       //Select the direct child div of myDIV. show all
    return !$(this).text().includes(value);        //Select all divs that does not include the text 
  }).hide();                                       //hide
});

#myDIV>div {
  margin: 10px;
  border: 1px solid black;
}

h4 {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div class="row" id="myDIV">
  <div class="col-sm-6">
    <h4>Question is that 1</h4>
    <div class="lead faq-answer">Answer is that</div>

  </div>

  <div class="col-sm-6">
    <h4>Question is this 2</h4>

    <div class="lead faq-answer">Answer is this</div>
  </div>

  <div class="col-sm-6">
    <h4>Another Question</h4>

    <div class="lead faq-answer">Answer to another</div>
  </div>
</div>

使用Bootstrap Filter将元素保持在一起

2 个答案: