@ngocphan/complete-me 是一个用于实时输入提示的 npm 包，用于在前端中向用户提供自动完成输入的功能。如果你正在开发一个需要输入的应用程序，它可以大大提高用户的输入效率和体验。
安装
你可以使用 npm 在你的项目中安装 @ngocphan/complete-me。命令如下：
npm install @ngocphan/complete-me
快速开始
安装完成后，在你的项目中引入 @ngocphan/complete-me 的源码和 CSS 样式。你可以这样做：
<link rel="stylesheet" href="/path/to/@ngocphan/complete-me.css"> <script src="/path/to/@ngocphan/complete-me.js"></script>
然后实例化 AutoComplete() 类：
const ac = new AutoComplete({
input: document.querySelector('#input'),
source: ['apple', 'banana', 'cherry']
});其中 input 是你需要提供输入提示的输入框元素，source 是你希望从中选择的建议，可以是一个数组或一个返回数组的函数。
默认情况下，用户从建议中选择一个选项后，选项将被设置为输入框的值。如果你希望自定义这种行为，可以使用 onSelect() 钩子函数来处理。
const ac = new AutoComplete({
input: document.querySelector('#input'),
source: ['apple', 'banana', 'cherry'],
onSelect: (item) => {
console.log(item);
// 处理选定项的逻辑
}
});高级使用
匹配器
默认情况下， AutoComplete 会使用字符串包含来匹配建议和输入，但你也可以使用自定义匹配器来自定义匹配行为。
const ac = new AutoComplete({
input: document.querySelector('#input'),
source: ['apple', 'banana', 'cherry'],
matcher: function(inputValue, suggestionValue) {
// 返回一个布尔值指示是否匹配
}
});匹配器函数接收两个参数 —— 输入框中的值和建议的值，并返回一个布尔值，指示建议是否与输入匹配。
高级源选项
你可以使用更高级的源选项来使建议变得更动态，例如 AJAX/网络请求来获取建议。
const ac = new AutoComplete({
input: document.querySelector('#input'),
source: async function(text, update) {
const suggestions = await fetch(`/api/suggestions?q=${text}`)
.then((res) => res.json());
update(suggestions);
}
});当用户输入时，它将调用 update() 函数，并返回一个新的建议数组。
自定义渲染
你可以使用 renderItem() 函数来自定义建议的呈现方式。你只需要返回一个 HTML 字符串。
-- -------------------- ---- -------
----- -- - --- --------------
------ ---------------------------------
------- --------- --------- ----------
----------- -------------- ----------- -
----- ----- - --- ------------------ ------
----- ----------- - ------------------- ------- -- -
------ ------ -----------------------------------
---
------ ----- ------------------------------------------------
-
---以上代码将使用正则表达式将输入框中的文本替换为高亮文本，以更好地显示建议。
结论
@ngocphan/complete-me 是一个强大而灵活的 npm 包，可以在你的前端应用程序中实现实时输入提示和自动完成输入的功能。本文提供了一个详细的使用教程，并对一些高级用法进行了介绍，希望能对你在开发过程中提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244888