javascript - 在网页中添加用于搜索功能的脚本

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

标签： javascriptjqueryhtml

Answer 1

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

您不能隐藏卡片然后尝试显示卡片内的 H4。$("#myTable .card")改为访问

您还滥用过滤器的副作用 - 过滤内容或切换内容

如果包装 div 没有隐藏，你会得到一个散射。所以现在我切换隐藏的包装器

$(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
      )
   });   
  });
});

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

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