npm 包 @pirxpilot/autosuggest 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 Web 应用中，自动补全功能越来越常用，在前端开发中实现一个快速高效的自动补全组件十分有必要。@pirxpilot/autosuggest 是一个优秀的 npm 包，用于实现自动补全功能，本篇文章将对其使用进行详细介绍。

安装

使用 npm 进行安装，执行以下命令：

npm install @pirxpilot/autosuggest

使用方法

引入组件库

在需要使用自动补全组件的文件中，进行如下引入：

import Autosuggest from "@pirxpilot/autosuggest";

构造数据源

自动补全组件需要数据源支持，可以从服务端或者客户端提供，并将所有需要补全的文本放到数组中。

构造数据源示例代码：

const items = [
  {name: 'apple', value: 10},
  {name: 'banana', value: 20},
  {name: 'orange', value: 30},
];

渲染组件

选中一个输入框，实例化 Autosuggest 组件，并将数据源作为参数传入；在用户输入时，组件将根据输入内容，提供相应的自动补全建议。

示例代码如下：

const input = document.querySelector('input#my-id');
Autosuggest(input, {
  items: items,
  getValue: item => item.name,
  onSelect: item => console.log('Selected: ' + item.name),
});

上述代码中，items 是数据源，getValue 方法用于从数据源中获取额外的值，onSelect 方法将在用户选择自动补全选项时被调用。

高级用法

自定义建议列表的呈现方式：用户可以自定义自动补全建议列表的样式和外观。

示例代码：

const input = document.querySelector('input#my-id');
Autosuggest(input, {
  items: items,
  render: item => `<div>${item.name}</div><span>${item.value}</span>`,
});

通过 render 方法，我们可以为组件定制自己的建议列表。上述示例将自动补全建议的名称和值分别渲染到 div 和 span 中。

更高级的数据源：有时候我们需要从服务端拉取数据，并根据用户的输入实时过滤结果。

示例代码：

const input = document.querySelector('input#my-id');
Autosuggest(input, {
  source: (text, callback) => {
    fetch(`/api/search?text=${text}`)
      .then(response => response.json())
      .then(items => callback(items));
  },
});

上述代码将服务端返回的 JSON 格式数据作为数据源，每次用户输入都会向服务端发送查询请求，并根据响应内容进行自动补全建议的更新。

总结

通过本文介绍，我们了解到 @pirxpilot/autosuggest 包的使用方法和高级用法，了解了如何通过自定义数据源和 render 方法，实现自己的自动补全组件。在实践中，开发者可以根据实际情况进行组件的定制和优化，提升用户体验，优化应用性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600553cb81e8991b448d10eb