Question

我正在尝试为搜索过滤器添加脚本，并在实现时遇到错误。请让我知道我错在哪里

我已使用代码

添加了搜索栏

<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">

之后我在body标签中添加了脚本

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<header class="my-4">
  <h1 class="display-3">Welcome to Open Academy</h1>
</header>

<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">

<div class="row text-center" id="myTable">



  <div class="col-lg-3 col-md-6 mb-4">

    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>
</div>
<!-- /.row -->

Answer 1

您需要展示比您目前所发现的更高的东西。

您无法隐藏卡片，然后尝试在卡片内显示H4。访问$("#myTable .card")而不是

此外，您滥用过滤器的副作用 - 过滤内容或切换内容

如果未隐藏包装div，则会散射。所以现在我切换隐藏的包装器

＆＃13;

$(document).ready(function() {
  $("#myInput").on("input", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable .card").each(function() {
      $(this).parent().toggle(
        $.trim(value)!="" && $(this).text().toLowerCase().indexOf(value) > -1
      )
   });   
  });
});

＆＃13;

#myTable>div { display:none; float:left; border:1px solid grey; margin:5px; padding:5px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<header class="my-4">
  <h1 class="display-3">Welcome to Open Academy</h1>
</header>

<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">

<div class="row text-center" id="myTable">



  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

</div>
<!-- /.row -->

＆＃13;

Answer 2

您正在切换h4而不是包含它的.card。您也不需要在过滤时切换。过滤您想要的并一次显示它们。如果您想一个接一个地使用.each而不是.filter

＆＃13;

$(document).ready(function() {
  $("#myInput").on("input", function() {
    var value = $(this).val().toLowerCase();
    var allCards = $('#myTable .card');

    allCards
      .hide() // hide all cards
      .filter(function() { // filter the cards that match
        var h4text = $(this).find('h4').text().toLowerCase();
        return h4text.indexOf(value) > -1;
      }).show() // show the filtered cards

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<header class="my-4">
  <h1 class="display-3">Welcome to Open Academy</h1>
</header>

<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">

<div class="row text-center" id="myTable">



  <div class="col-lg-3 col-md-6 mb-4">

    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Deep Learning</h4>
        <p class="card-text">This is an introductory course to Deep learning </p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
      <img class="card-img-top" src="#" alt="">
      <div class="card-body">
        <h4 class="card-title">Machine Learning</h4>
        <p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
      </div>
      <div class="card-footer">
        <a href="#" target="_blank" class="btn btn-primary">Watch Now</a>
      </div>
    </div>
  </div>
</div>
<!-- /.row -->

＆＃13;

在网页中添加搜索功能的脚本

2 个答案: