随着现代互联网的快速发展，越来越多的网站需要提供搜索功能。而对于维基百科这样的知识库网站，搜索功能的重要性更是不言而喻。Wikibox 就是一款基于维基百科 API 的 npm 包，可以快速地在你的网站中集成维基百科相关信息的搜索功能。本文将详细介绍 Wikibox 的安装与使用，以及一些实际场景下的应用示例。
安装
在使用 Wikibox 之前，需要先进行安装。在终端中输入以下命令即可：
npm install wikibox --save
使用
Wikibox 的使用非常简单。只需编写以下代码即可在你的网站中嵌入一段维基百科的搜索框：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------- ------------ ------- ------ ----- ----------------------------- -------- -------------------------------------------------------- --------- ----------- ------------- -------------------- ---------- ------ ----- ---------- ------- -------
其中，wikibox-container 是你要放置搜索框的 div 元素的 id。engine 则指定了搜索引擎，这里我们指定为 'wiki' 表示使用维基百科搜索引擎。你还可以选择 'google' 或 'bing' 等其他搜索引擎。
启动网站后，你应该就能在页面中看到一个简单的搜索框了。
其他参数
除了必须的 container 和 engine 属性外，Wikibox 还支持很多其他的自定义参数：
language: 指定搜索的语言，默认为'en'minChars: 触发自动补全的最少字符数，默认为3maxItems: 自动补全框中最多展示的搜索结果数量，默认为10delay: 触发自动补全的时间间隔（毫秒），默认为200
应用示例
现在我们来看看一些实际场景下，如何使用 Wikibox 来提升我们网站的搜索功能。下面是一些示例代码：
示例 1：搜索百科知识
如果你的网站上有一些专业术语或名词需要解释，那么可以使用 Wikibox 来快速搜索维基百科的相关词条，提供更加详细的解释。
-- -------------------- ---- ------- --------- ----------- ----------------------- -------- ------- ---------- -- ---------- -------------- - ----- ----- - -------------------- -------- ----- --- - -------------------------------- - ------ ------------------- -- ---
上面的代码中，我们将 minChars 设为零，表示只要输入框有内容，就会触发自动补全。而为了方便用户直接进入相关词条页面，我们还在 onSelect 回调函数中，为搜索结果添加了单击事件处理，并打开了相应的维基百科页面。
示例 2：搜索图片
如果是一个图片网站，那么当用户在搜索框中输入图片名称时，我们可以使用 Wikibox 提供的 Bing 搜索引擎，搜索相关图片并展示出来。
-- -------------------- ---- ------- --------- ----------- ------------------ -------- ------- ---------- -------------- - ----- --- - --------- ----- ---- - ----- ------ - --- - ----- ----------------------------- -- ---
上面的代码中，我们将 engine 设为 'bing'，并在 onSelect 回调函数中使用搜索结果的图片 url，创建一个 img 标签并展示出来。
示例 3：搜索视频
如果是一个视频网站，我们可以使用 Wikibox 提供的 Google 搜索引擎，搜索相关视频并展示出来。
-- -------------------- ---- ------- --------- ----------- ------------------ -------- --------- ---------- -------------- - ----- ------- - ---------------- ----- --- - ---------------------------------- - -------- ----- ---- - -------- ----------- ------------ ------ - --- - -- --------------- --------------------------- ----------------------------- -- ---
上面的代码中，我们将 engine 设为 'google'，并在 onSelect 回调函数中使用搜索结果的视频 id，创建一个 iframe 元素并展示出来。因为视频的 url 地址中包含视频 id，所以需要先从搜索结果中提取视频 id，然后再拼接出正确的 url 地址。另外，搜索结果的媒体类型可能不确定，我们需要先确认搜索结果是否为视频类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0fd