简介
domainr-search-box 是一个开源的 npm 包，用于在网页中嵌入域名搜索框，方便用户快速查询域名是否可用。本文将详细介绍如何使用该包以及其背后的原理。
安装
在安装之前，请确保已经安装好了 Node.js 和 npm。
在命令行中执行以下命令即可安装：
npm install domainr-search-box
使用方法
引入
首先，在 HTML 文件中引入 domainr-search-box 的 CSS 样式和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/domainr-search-box/dist/style.css"> <script src="node_modules/domainr-search-box/dist/bundle.js"></script>
注意，这里需要根据实际的文件路径进行调整。
创建搜索框
接下来，在 HTML 中添加一个空的 <div> 元素，用于容纳搜索框：
<div id="domainr-search-box"></div>
然后，在 JavaScript 中创建搜索框实例：
const searchBox = new DomainrSearchBox({
container: '#domainr-search-box',
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_API_KEY',
});其中，appId 和 apiKey 需要替换为你自己的应用 ID 和 API Key。如果还没有申请，请前往 Domainr 官网注册并创建应用。
自定义配置
DomainrSearchBox 构造函数可以接受一个配置对象，用于自定义搜索框的外观和功能。以下是一些常用的配置项：
container: 搜索框的容器元素，可以是 CSS 选择器字符串或 DOM 元素。placeholder: 搜索框的占位符文本。results: 搜索结果的容器元素，可以是 CSS 选择器字符串或 DOM 元素。resultTemplate: 搜索结果使用的模板字符串，可以包含变量${domain}和${register}，分别表示域名和注册商。onSelect: 用户选择一个搜索结果时的回调函数。
例如，如果要将搜索框嵌入到
<form> 元素中，并将搜索结果显示在另一个 元素中，可以这样配置：
const searchBox = new DomainrSearchBox({
container: 'form',
results: '#search-results',
resultTemplate: '<li>${domain} (${register})</li>',
onSelect: (result) => {
console.log('Selected:', result);
},
});方法和事件
DomainrSearchBox 实例提供了一些方法和事件，用于与搜索框进行交互。
方法
focus(): 将焦点设置到搜索框中。blur(): 将焦点从搜索框中移除。setQuery(query): 设置搜索框的查询文本。clearResults(): 清空搜索结果。
事件
input: 当搜索框中的文本发生变化时触发。search: 当用户提交查询时触发，可以通过event.detail.query获取查询文本。results: 当搜索结果更新时触发，可以通过event.detail.results获取搜索结果数组。
例如，可以监听 search 事件，在查询前添加一些提示文字：
searchBox.addEventListener('search', (event) => {
const { query } = event.detail;
searchBox.setPlaceholder(`Searching "${query}"...`);
});示例代码
下面是一个完整的示例代码，包括 HTML 和 JavaScript 部分：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------ --- ---------------
----- ---------------- ------------------------------------------------------
-------
------
------
---- ------------------------------
------- -----------------------------
-------
---- ----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------