📌  相关文章
📜  输入搜索图片 jquery - Javascript(1)

📅  最后修改于: 2023-12-03 15:28:17.503000             🧑  作者: Mango

概述

在Web开发中，在一个页面上使用图片是很常见的。有时，需要从一大堆图片中选择一张。为此，需要一个搜索图片的功能。在本文中，我们将学习如何使用jQuery和JavaScript实现这一搜索图片功能。

实现步骤
步骤1：创建HTML代码

在HTML中，我们需要创建一个包含一个搜索框和一个图片列表的容器。搜索框用于输入搜索关键字，图片列表用于显示图片。代码如下：

<div class="search-container">
  <input type="text" id="search-box" placeholder="输入搜索关键字">
  <div class="image-list">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
  </div>
</div>
步骤2：编写JavaScript代码

在JavaScript中，我们需要获取搜索框中输入的关键字，然后从图片列表中筛选出符合要求的图片。代码如下：

$(document).ready(function() {
  // 监听搜索框的输入事件
  $('#search-box').keyup(function() {
    // 获取搜索关键字
    var searchValue = $(this).val().trim().toLowerCase();

    // 遍历所有图片
    $('.image-list img').each(function() {
      var alt = $(this).attr('alt').toLowerCase(); // 获取图片描述

      // 如果图片描述中包含搜索关键字，则显示该图片
      if (alt.indexOf(searchValue) >= 0) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});
步骤3：添加CSS样式

为了使页面更美观，我们需要添加一些CSS样式。主要是对搜索框和图片列表进行布局。代码如下：

.search-container {
  text-align: center;
  padding: 20px;
}

#search-box {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  border: none;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
}

.image-list img {
  width: 200px;
  height: 200px;
  margin: 10px;
  object-fit: cover;
  border-radius: 10px;
}
完整代码

下面是完整的HTML、JavaScript和CSS代码：

<!DOCTYPE html>
<html>
<head>
  <title>搜索图片</title>
  <meta charset="UTF-8">
  <style>
    .search-container {
      text-align: center;
      padding: 20px;
    }

    #search-box {
      width: 100%;
      height: 40px;
      border-radius: 20px;
      border: none;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .image-list img {
      width: 200px;
      height: 200px;
      margin: 10px;
      object-fit: cover;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="search-container">
    <input type="text" id="search-box" placeholder="输入搜索关键字">
    <div class="image-list">
      <img src="image1.jpg" alt="图片1">
      <img src="image2.jpg" alt="图片2">
      <img src="image3.jpg" alt="图片3">
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 监听搜索框的输入事件
      $('#search-box').keyup(function() {
        // 获取搜索关键字
        var searchValue = $(this).val().trim().toLowerCase();

        // 遍历所有图片
        $('.image-list img').each(function() {
          var alt = $(this).attr('alt').toLowerCase(); // 获取图片描述

          // 如果图片描述中包含搜索关键字，则显示该图片
          if (alt.indexOf(searchValue) >= 0) {
            $(this).show();
          } else {
            $(this).hide();
          }
        });
      });
    });
  </script>
</body>
</html>
结论

通过本文的介绍，我们已经学会了如何使用jQuery和JavaScript实现搜索图片的功能。这使得我们可以在一个包含许多图片的页面上非常方便地选择自己需要的图片。