onsearch 事件

在 web 开发中，实现实时搜索功能是一项常见的需求。用户在输入框中输入关键字时，页面会实时展示相关的搜索结果，提升了用户体验。在这篇文章中，我们将介绍如何使用 onsearch 事件来实现实时搜索功能。

什么是 onsearch 事件？

onsearch 事件是一个 HTML5 新增的事件，当用户在输入框中输入内容并按下回车键或者点击搜索按钮时，会触发该事件。在实时搜索功能中，我们可以利用这个事件来监听用户的输入并进行搜索操作。

如何使用 onsearch 事件？

要使用 onsearch 事件，首先需要在 HTML 中添加一个输入框，并为其绑定一个 onsearch 事件的处理函数。示例代码如下：

<input type="text" id="searchInput" onsearch="handleSearch()">

在上面的示例中，我们为 id 为 searchInput 的输入框绑定了一个 onsearch 事件，并指定了一个 handleSearch 函数作为事件的处理函数。

接下来，我们需要在 JavaScript 中实现 handleSearch 函数，该函数会在用户输入内容并触发搜索事件时被调用。我们可以在这个函数中获取用户输入的关键字，并进行搜索操作。示例代码如下：

function handleSearch() {
    let keyword = document.getElementById("searchInput").value;
    
    // 根据关键字执行搜索操作
    // 这里可以调用后端接口或者本地数据进行搜索
}

在 handleSearch 函数中，我们首先通过 document.getElementById 获取输入框中的内容，然后可以根据用户输入的关键字执行相应的搜索操作。你可以调用后端接口或者本地数据进行搜索，然后将搜索结果展示在页面上。

实时搜索功能示例

下面是一个简单的实时搜索功能示例，当用户输入关键字并按下回车键时，会触发搜索操作并展示搜索结果：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>实时搜索示例</title>
</head>
<body>
    <input type="text" id="searchInput" onsearch="handleSearch()">
    <ul id="searchResults"></ul>

    <script>
        function handleSearch() {
            let keyword = document.getElementById("searchInput").value;
            let searchResults = document.getElementById("searchResults");
            
            // 模拟搜索结果
            let results = ["Apple", "Banana", "Cherry", "Durian"];
            
            // 清空搜索结果
            searchResults.innerHTML = "";
            
            // 展示搜索结果
            results.forEach(result => {
                if (result.toLowerCase().includes(keyword.toLowerCase())) {
                    let li = document.createElement("li");
                    li.textContent = result;
                    searchResults.appendChild(li);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，用户输入关键字后会实时展示搜索结果。我们首先模拟了一组搜索结果，然后根据用户输入的关键字进行过滤，将符合条件的结果展示在页面上。

通过以上的示例，你可以了解如何使用 onsearch 事件来实现实时搜索功能。希术这篇文章对你有所帮助，谢谢阅读！