在前端开发中，经常需要实现输入框的自动补全功能。这时候可以使用 tributejs 这个 npm 包来快速实现。本文将详细介绍 tributejs 包的使用方法。
安装
首先，我们需要在项目中安装 tributejs：
npm install tribute --save
引入
安装成功后，我们可以在代码中引用 tributejs：
import Tribute from 'tributejs';
使用
下面我们来看一下如何使用 tributejs 实现输入框的自动补全功能。
基本用法
<input id="myInput">
-- -------------------- ---- ------- ----- ------- - ----------------------------------- ----- ------- - --- --------- ------- - ----- ----- ---------- ------ ------------- ----- ------- -------- ------ ---------- - --- ------------------------展开代码
以上代码会在 #myInput 输入框中启用自动补全功能，并且设置了两个选项：Phil Heartman 和 Gordon Ramsey。
自定义模板
我们可以通过自定义模板来更改自动补全选项显示的样式。
<div> <input id="myInput2"> <ul id="myList"></ul> </div>
-- -------------------- ---- ------- ----- -------- - ------------------------------------ ----- ------ - ---------------------------------- ----- -------- - --- --------- ------- - ----- ----- ---------- ------ ------------- ----- ------- -------- ------ ---------- -- --------------- -------- ------ - ------ ------ - ----------------- - -------- - --- -------------------------- --------------------------------- -------- ------ - ------------------------- ---展开代码
以上代码会将自动补全选项显示为一个无序列表，并且选项的文本内容为 item.original.key。
异步加载
有时候我们需要从服务器异步获取自动补全选项，这时候可以使用 lookup 方法来实现。
<input id="myInput3">
-- -------------------- ---- ------- ----- -------- - ------------------------------------ ----- -------- - --- --------- ------- -------- ------ --------- - ----- ----- - - ----- ----- ---------- ------ ------------- ----- ------- -------- ------ ---------- -- ------------------- -- - ---------------- -- ------ - --- --------------------------展开代码
以上代码会在输入框中输入文字后，等待 3 秒后再显示自动补全选项。在 lookup 方法中，我们可以通过 ajax 请求或者其他方式来获取自动补全选项。
指导意义
使用 tributejs 可以快速实现输入框的自动补全功能，大大提高了开发效率。同时，通过自定义模板和异步加载等高级功能，我们可以满足更加复杂的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36354
