简介
Trina 是一个 npm 包，它提供了一种方便的方式来处理文本输入，包括自动补全、搜索结果高亮、按键绑定等功能，非常适合在前端开发中使用。
安装
首先，你需要安装 Node.js 和 npm 工具。然后，在你的项目目录中运行以下命令来安装 trina：
npm install trina
使用
创建 trina 实例
要使用 trina，你需要先创建一个 trina 实例。以下是一个示例：
-- -------------------- ---- -------
--- ----- - -----------------
--- ------- - -
----- --------- --------- --------- -------------
--------- -------------- -
---------------- - - -- -----------
-
--
--- ------- - ------------------------------------
--- ------- - -------------- ---------在上面的示例中，我们创建了一个 trina 实例，并将其绑定到了一个输入框（<input> 或 <textarea>）。我们还通过 options 对象来配置 trina 实例，包括输入数据和选择后的回调。
输入数据
在 trina 实例中，输入数据是通过 data 属性来定义的。你可以使用一个简单的字符串数组，或一个包含对象的复杂数组来定义输入数据。
以下是一个包含对象的示例：
var options = {
data: [
{ value: 'apple', label: '苹果' },
{ value: 'orange', label: '橙子' },
{ value: 'banana', label: '香蕉' },
{ value: 'pineapple', label: '菠萝' },
],
};在上面的示例中，我们为每个输入项定义了一个标签（label）和一个值（value）。
自动补全
trina 提供了一种方便的方式来自动补全输入。只要用户输入了与输入数据中的一个选项匹配的前缀，trina 就会自动选择该选项，并将其填充到输入框中。
以下是一个包含自动补全功能的示例：
var options = {
data: ['apple', 'orange', 'banana', 'pineapple'],
autocomplete: true,
};
var inputEl = document.querySelector('.my-input');
var myTrina = trina(inputEl, options);搜索结果高亮
当用户输入一些字符串时，trina 可以高亮所有匹配的结果。只需将 highlight 属性设置为 true，即可启用此功能。
以下是一个包含搜索结果高亮功能的示例：
var options = {
data: ['apple', 'orange', 'banana', 'pineapple'],
highlight: true,
};
var inputEl = document.querySelector('.my-input');
var myTrina = trina(inputEl, options);按键绑定
如果你需要在 trina 实例上绑定一些自定义按键事件，可以使用 bindKeys 方法。该方法需要传入一个键值对，其中键表示按键的键码，而值则是一个函数，用于处理相应的按键事件。
以下是一个包含按键绑定功能的示例：
-- -------------------- ---- -------
--- ------- - -
----- --------- --------- --------- -------------
--
--- ------- - ------------------------------------
--- ------- - -------------- ---------
------------------
--- ---------- - -- - ----- ------
------------------ --- -- ----------
--
--- ---------- - -- - --- ------
---------------- --- -- ----------
--
---总结
trina 是一个非常方便的 npm 包，可以帮助你处理文本输入，并提供了许多方便的功能，像自动补全、搜索结果高亮、按键绑定等。在前端开发中，trina 经常用于构建自动填充表单或搜索框。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8e81e8991b448d9345