介绍
instantsearch.js 是一个基于 Algolia 搜索引擎的轻量级搜索库，用于在前端实现实时搜索。它支持各种搜索体验和自定义选项，并包含强大的文本分析和排名算法。
安装
要安装 instantsearch.js，请使用 npm 包管理器运行以下命令：
npm install instantsearch.js
或者通过 CDN 引入 instantsearch.js 和 instantsearch.css 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@3.6.0/themes/reset.css" integrity="sha384-5zJr31wjk1nUd61SWmUoK9+6e/b8ggv1Ujww1xlLz08rWfQ2Rz5iLEOgK63XtyaH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.7.1"></script>
使用
初始化搜索组件
使用 instantsearch.js 创建一个搜索组件需要先进行初始化。在以下示例中，我们将创建一个搜索框和一个显示搜索结果的区域：
<div id="search-box"></div> <div id="hits"></div>
-- -------------------- ---- -------
----- ------ - ---------------
---------- ---------
------------- ---------------------------- ---------------
---
-------------------
---------------------------------
---------- -------------
---
----------------------------
---------- --------
---------- -
----- -
-----
---- --------------- --
-------------------------------------------
-----------------------------------------------
------
-
-
--
---
---------------配置搜索参数
可以通过设置 configure widget 来配置搜索参数：
-- -------------------- ---- -------
-------------------
---------------------------------
------------ ---
-------- ----------------
------- ---------- -----------
---
-- -------
---过滤结果
使用 refinementList 组件创建一个过滤器：
<div id="categories"></div>
search.addWidgets([
instantsearch.widgets.refinementList({
container: '#categories',
attribute: 'category'
}),
// 其他组件...
]);排序结果
可以使用 sort-by-selector 组件对搜索结果进行排序：
<select id="sort-by"> <option value="movies">Movies</option> <option value="restaurants">Restaurants</option> </select>
-- -------------------- ---- -------
-------------------
--------------------------------------
---------- -----------
------ -
- ------ ----- ---------- ------ -------- --
- ------ -------- ------- ------ ------------- -
-
---
-- -------
---自定义搜索体验
instantsearch.js 提供了许多自定义选项，例如定制化搜索框的外观、高亮显示搜索结果中的关键字、显示搜索结果的方式等。以下是一些可用的选项：
-- -------------------- ---- -------
---------------------------------
---------- --------------
------------ ------- --- -------
---
----------------------------
---------- --------
---------- -
----- -
-----
---- --------------- --
-------------------------------------------
-----------------------------------------------
------
-
--
----------- -
----- -------------
----- ------------
-
---总结
instantsearch.js 提供了一个简单但功能强大的搜索库，可以为网站和应用程序提供实时搜索体验。通过配置和自定义组件，可以轻松地将 instantsearch.js 集成到任何前端项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34359