介绍
searchstrap.js 是一个基于 jQuery 的搜索插件，在输入框中输入关键字，插件可以自动帮助搜索相关的数据。searchstrap.js 可以方便地应用于各种网站和 Web 应用程序中，它支持各种数据源，例如 JavaScript 数组、JSON 文件、后端 API 等等。
安装
可以通过 npm 安装 searchstrap.js，在终端中运行以下命令：
npm install searchstrap
使用
在 HTML 文件中引入以下依赖库：
<!-- css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/searchstrap/dist/searchstrap.min.css"> <!-- js --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/searchstrap/dist/searchstrap.min.js"></script>
在 HTML 中添加一个输入框和一个用于显示搜索结果的空 div。
<input type="text" id="search-input"> <div id="search-result"></div>
在 JavaScript 中，使用以下代码初始化 searchstrap：
$('#search-input').searchstrap({
data: [], // 数据源
tmplResult: function(item) {
return '<div>' + item.title + '</div>'; // 搜索结果模板
}
}, function(result) {
$('#search-result').html(result); // 将搜索结果显示到页面上
});使用时需要在初始化时传入数据源以及搜索结果模板。在搜索结果中，可以通过回调函数返回一个 HTML 字符串。searchstrap.js 会将搜索结果作为参数传递给回调函数，并将返回的字符串显示在页面上。
数据源
以下是 searchstrap.js 支持的数据源类型和使用方法。
数组
可以将数据以数组的形式传递给 searchstrap.js：
-- -------------------- ---- -------
--- ---- - -
-
------ -------------
----- ---------------------------------------------------------
--
-
------ ---------
----- -----------------------
--
-
------ --------
----- ----------------------
-
--
--------------------------------
----- -----
----------- -------------- -
------ ------- - ---------- - ---------
-
-- ---------------- -
---------------------------------
---JSON 文件
可以通过 AJAX 加载 JSON 文件作为数据源：
-- -------------------- ---- -------
---------------------- -------------- -
--------------------------------
----- -----
----------- -------------- -
------ ------- - ---------- - ---------
-
-- ---------------- -
---------------------------------
---
---网络请求
可以通过 AJAX 请求后端接口获取数据，并将其作为 searchstrap.js 的数据源：
-- -------------------- ---- -------
--------
---- --------------
----- ------
-------- -------------- -
--------------------------------
----- -----
----------- -------------- -
------ ------- - ---------- - ---------
-
-- ---------------- -
---------------------------------
---
-
---高级用法
异步搜索
可以通过 searchstrap.js 提供的异步搜索功能，在输入框中输入关键字时实时搜索数据：
-- -------------------- ---- -------
--------------------------------
----- ---
----------- -------------- -
------ ------- - ---------- - ---------
-
-- ---------------- -
---------------------------------
-- -
--------- ----
------- ----------------- --------- -
--------
---- --------------
----- ------
----- -
-------- -------
--
-------- -------------- -
---------------
-
---
-
---在上述代码中，通过在 options 参数中传入 source 和 throttle 选项，可以实现异步搜索，即在输入框中输入关键词时，每隔一定时间进行一次异步搜索，并将搜索结果返回给回调函数。
source 选项用于指定异步搜索的回调函数，它会被传入输入框中的关键词和一个回调函数。回调函数需要将异步获取的结果以数组的形式传递给 searchstrap.js。
throttle 选项用于指定异步搜索的延迟时间，单位为毫秒。在每次输入时，如果距离上一次搜索时间不足 throttle 毫秒，则不会进行新的搜索请求。
列表项动态高亮
可以通过将模板字符串中包含的关键词用 span 标签包裹起来，然后添加一个 CSS 类，实现列表项的动态高亮效果：
-- -------------------- ---- -------
--------------------------------
----- -----
----------- -------------- -------- -
--- ----- - -----------
---- - ----------
-- ----- ---- ------------ --- -
----- - ----------------- --------------- ------ ------ ------------------------------
------ -------- ------- - ---- - ---- - ----- - -------------
-
-- ---------------- -
---------------------------------
---在上述代码中，使用了 JavaScript 的 replace 方法以及正则表达式，将字符串中所有与关键词匹配的部分用 span 标签包裹起来，并添加了一个 CSS 类 highlight。
使用 CSS 样式表定义 highlight 类，实现一个简单的高亮效果即可：
.highlight {
color: red;
}示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------
----- ---------------- -------------------------------------------------------------------------
-------
------
------ ----------- ------------------
---- -------------------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------------
--------
------------ -
--- ---- - -
-
------ -------------
----- ---------------------------------------------------------
--
-
------ ---------
----- -----------------------
--
-
------ --------
----- ----------------------
--
-
------ ---------
----- ---------------------
--
-
------ ----------
----- ---------------------
-
--
--------------------------------
----- -----
----------- -------------- -------- -
--- ----- - -----------
---- - ----------
-- ----- ---- ------------ --- -
----- - ----------------- --------------- ------ ------ ------------------------------
------ -------- ------- - ---- - ---- - ----- - -------------
-
-- ---------------- -
---------------------------------
-- -
--------- ----
------- ----------------- --------- -
--------
---- --------------
----- ------
----- -
-------- -------
--
-------- -------------- -
---------------
-
---
-
---
---
---------
-------
---------- -
------ ----
-
--------
-------
-------总结
searchstrap.js 是一个非常实用的搜索插件，它可以帮助我们方便地实现搜索功能。本文介绍了 searchstrap.js 的基本使用方法以及高级用法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a9d81e8991b448d8162