在 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 获取输入框中的内容，然后可以根据用户输入的关键字执行相应的搜索操作。你可以调用后端接口或者本地数据进行搜索，然后将搜索结果展示在页面上。
实时搜索功能示例
下面是一个简单的实时搜索功能示例，当用户输入关键字并按下回车键时，会触发搜索操作并展示搜索结果：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
------ ----------- ---------------- --------------------------
--- ------------------------
--------
-------- -------------- -
--- ------- - ---------------------------------------------
--- ------------- - -----------------------------------------
-- ------
--- ------- - --------- --------- --------- ----------
-- ------
----------------------- - ---
-- ------
---------------------- -- -
-- ------------------------------------------------------ -
--- -- - -----------------------------
-------------- - -------
------------------------------
-
---
-
---------
-------
-------在这个示例中，用户输入关键字后会实时展示搜索结果。我们首先模拟了一组搜索结果，然后根据用户输入的关键字进行过滤，将符合条件的结果展示在页面上。
通过以上的示例，你可以了解如何使用 onsearch 事件来实现实时搜索功能。希术这篇文章对你有所帮助，谢谢阅读！