介绍
iupick 是一个功能强大的 JavaScript 库，它可以从一组选项中自动完成输入框的文本。iupick 可以精确匹配用户输入的字符，得出最相关的选项。它非常适合用于地点、城市等输入，可以有效的提高用户输入的效率。iupick 依赖于 jquery 库，可以在 node.js 和浏览器中使用。这里主要介绍 iupick 的 npm 包的使用，让你轻松入门打造自己的选择框。
安装
首先需要使用 npm 安装 iupick：
npm install iupick --save
使用
iupick 支持两种使用方式：直接应用于输入框或者通过 JavaScript API 操作。
直接应用于输入框
使用 iupick 需要在输入框添加 data-iupick 属性以及 iupick 唯一的 id。这里举一个例子，假设我们有一个输入框：
<input type="text" id="pickItem" placeholder="选择一个地点" />
我们需要在输入框上添加 data-iupick 以及设置 id：
<input type="text" id="pickItem" data-iupick="true" />
然后我们可以通过下面的JavaScript代码初始化 iupick：
-- -------------------- ---- -------
-----------------------
-- ----
------ ------ ----- ----- ----- ------
-- ----
-------- ---
--------- --
---------- ------
------------ -----
---------- ------
------------ ---
------ ----
----------- -------------- -
------ -----
--
------------- -------------- -
------ -----
--
------------- -------------- -
------------
-
---其中，items 为我们准备在输入框中展示的选项数组。maxShow 用来设置最大显示选项数，minChars 设置最小输入字符数启动搜索，matchCase 是否考虑大小写，matchSubset 是否匹配子集，mustMatch 是否限定必需匹配一个选项，extraParams 为一些额外的参数，delay 设置输入延时时间。formatItem 和 formatResult 控制选项的显示格式。onItemSelect 函数在选择时触发。
通过 JavaScript API 操作
-- -------------------- ---- -------
--- ------ - --- ---------------------- -
------ ------ ----- ----- ----- ------
-------- ---
--------- --
---------- ------
------------ -----
---------- ------
------------ ---
------ ----
----------- -------------- -
------ -----
--
------------- -------------- -
------ -----
--
------------- -------------- -
------------
-
---
-- ------
----------------与直接应用于输入框的方式不同，这里需要调用 iupick 的构造函数，并且需要传入一个 jQuery 对象以及初始化参数。我们可以在初始化后调用 search 方法手动搜索选项。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------
------- ------------------------------------------------------------------
------- ------------------------------------------------------------------
-------
------
------ ----------- ------------- ------------------ --
--------
-----------------------
------ ------ ----- ----- ----- ------
-------- ---
--------- --
---------- ------
------------ -----
---------- ------
------------ ---
------ ----
----------- -------------- -
------ -----
--
------------- -------------- -
------ -----
--
------------- -------------- -
------------
-
---
---------
-------
-------总结
以上就是 iupick npm 包的使用教程了。希望通过这个教程大家可以掌握 iupick 的基本使用方法，进一步完善自己的网站。iupick 在实际的使用中还有更多的功能，建议大家多多自行研究。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a1d