JS 搜索功能|极客笔记

JS 搜索功能

在Web开发中，搜索功能是非常常见且重要的功能之一。用户可以通过搜索框快速查找到他们想要的内容，提高了网站的易用性和用户体验。在本文中，我们将详细介绍如何使用JavaScript实现一个简单的搜索功能，让用户可以在页面上进行搜索并得到相应的结果。

搜索框和搜索按钮

首先，我们需要在页面上添加一个输入框和一个按钮，用于实现搜索功能。下面是一个简单的HTML代码片段，包含了一个搜索框和一个搜索按钮：

<input type="text" id="searchInput" placeholder="请输入搜索内容">
<button onclick="search()">搜索</button>
<div id="searchResult"></div>

在上面的代码中，<input> 标签用于创建一个文本输入框，用户可以在其中输入搜索内容。<button> 标签创建了一个按钮，点击按钮时会调用 search() 函数进行搜索。搜索结果将会显示在 id 为 searchResult 的 <div> 中。

实现搜索功能

接下来，我们来实现 search() 函数，该函数将获取用户输入的搜索内容，并在页面上展示搜索结果。下面是一个简单的JavaScript代码示例：

function search() {
    // 获取用户输入的搜索内容
    var searchContent = document.getElementById("searchInput").value;

    // 模拟搜索结果，这里用一个简单的数组来代替真实的搜索结果
    var results = [
        "搜索结果1",
        "搜索结果2",
        "搜索结果3"
    ];

    // 在页面上展示搜索结果
    var searchResultElement = document.getElementById("searchResult");
    searchResultElement.innerHTML = ""; // 清空原有内容

    results.forEach(function(result) {
        var p = document.createElement("p");
        p.textContent = result;
        searchResultElement.appendChild(p);
    });
}

在 search() 函数中，首先使用 document.getElementById 获取用户输入的搜索内容，并使用一个数组 results 模拟搜索结果。然后，通过 forEach 方法遍历搜索结果并创建 <p> 元素将搜索结果展示在页面上。

完整代码示例

下面是完整的HTML和JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索功能</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="请输入搜索内容">
    <button onclick="search()">搜索</button>
    <div id="searchResult"></div>

    <script>
        function search() {
            var searchContent = document.getElementById("searchInput").value;
            var results = [
                "搜索结果1",
                "搜索结果2",
                "搜索结果3"
            ];
            var searchResultElement = document.getElementById("searchResult");
            searchResultElement.innerHTML = "";

            results.forEach(function(result) {
                var p = document.createElement("p");
                p.textContent = result;
                searchResultElement.appendChild(p);
            });
        }
    </script>
</body>
</html>