一个简单的 HTML + CSS + JavaScript 实现的搜索页面

最新推荐文章于 2023-11-29 22:13:47 发布

终将老去的穷苦程序员

最新推荐文章于 2023-11-29 22:13:47 发布

阅读量709

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/r081r096/article/details/129004726

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Search Page</title>
  <style>
    /* Add styles for the page */
    .container {
      width: 80%;
      margin: 0 auto;
      text-align: center;
    }

    .search-container {
      margin-top: 50px;
    }

    input[type="text"] {
      width: 60%;
      height: 30px;
      padding: 5px;
      border: 1px solid #ccc;
      font-size: 16px;
      border-radius: 5px;
    }

    button[type="submit"] {
      width: 20%;
      height: 35px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button[type="submit"]:hover {
      background-color: #3e8e41;
    }
  </style>
</head>
<body>
  <!-- Add a container for the page -->
  <div class="container">
    <!-- Add a form for the search box -->
    <div class="search-container">
      <form action="#">
        <input type="text" placeholder="Search..." id="searchBox">
        <button type="submit">Search</button>
      </form>
    </div>

    <!-- Add a container for the search results -->
    <div id="searchResults"></div>
  </div>

  <!-- Add JavaScript to handle the search functionality -->
  <script>
    const searchBox = document.getElementById("searchBox");
    const searchResults = document.getElementById("searchResults");

    searchBox.addEventListener("input", function() {
      const searchTerm = this.value;
      searchResults.innerHTML = "Search results for: " + searchTerm;
    });
  </script>
</body>
</html>

这个代码将创建一个简单的搜索页面，包括一个搜索框和一个用于显示搜索结果的容器。当用户在搜索框中输入内容时，搜索结果容器中的内容将根据搜索框中的内容进行更新。

这是一个简单的模板，您可以根据自己的需要进行修改和扩充