什么是 at.js
at.js 是一个基于 jQuery 的自动完成库,可以在输入框中快速地提示和选择一组预定义的选项。
该库由 Adobe 公司开发,可用于 Web 应用程序中,并提供多种高级功能。
安装 at.js
在安装之前,请确保您已经安装了 Node.js 和 npm。在命令行中执行以下命令来安装 at.js:
--- ------- ----- ------
引入 at.js
在 HTML 文件中通过 script 标签引入 at.js:
------- -----------------------------
或者,如果您使用模块化开发工具如 webpack,则可以使用以下方式引入 at.js:
------ -- ---- --------
使用 at.js
初始化
在你的 JavaScript 代码中创建一个新的 at 实例,并传递所需的选项:
----- ------- - - --- ---- ----- ------ ----- ----- ------- ---- ---------- ------ - -- ----- ---- - --- ------------
上述代码将创建一个 at 实例,该实例将在输入框中提示以 "@" 开头的最多 5 个可选项,这些可选项源自数据数组。
绑定输入框
使用 jQuery 将 at 实例绑定到输入框中:
--------------------------
上述代码将在所有 input 标签中启用 at.js。
选项
at.js 提供了多种选项,以控制提示和选择行为。以下是一些常用的选项:
at
: 触发自动完成的字符,默认为 "@"data
: 包含可选项的数组limit
: 最多显示的可选项数callbacks
: 回调函数,例如用于格式化数据或处理用户输入。
示例代码
以下示例演示了如何使用 at.js 来在输入框中提示 GitHub 用户名。
--------- ----- ------ ------ ----- ---------------- ------------ --------------- ----- ---------------- ------------------------------------------------------------------------ ------- ------ ------ ----------- ----------------- --- -- ------- - ------ ----- -- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------ -------- ----- ------- - - --- ---- ------ -- ----- -- -- -- ----- ------ ----- --- -------- --- ---- ----- ------------------------------------- -------------- -- ---------------- ----------- -- - ------------ - -------------- -- ------------ -------------------------- --- --------- ------- -------
上述代码将在输入框中提示 GitHub 用户名,当用户输入 "@" 字符时,它将从 GitHub API 中获取所有用户,并将其用作提示选项。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/32962