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

作者：Cpp五条 | 2024-02-16 11:30:31

踩

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/92737