什么是 lookupfield？
lookupfield 是一个针对前端开发的 npm 包，它提供了一个简单易用的字段搜索功能，可以嵌入到任何 HTML 表单中，让用户在一定区域内进行搜索，选取相关数据后，将数据的值返回给表单中的指定字段。
如何使用 lookupfield?
安装
首先，我们需要在项目中安装 lookupfield。打开终端，输入如下指令：
npm install --save lookupfield
引入
使用 lookupfield 需要先引入该库，你可以在你的 JavaScript 文件中按照如下方式引入：
import lookupfield from 'lookupfield';
使用
lookupfield 的使用非常简单。我们只需要调用它的 init 函数，并传入需要绑定的输入框和数据的源，就可以让 lookupfield 在输入框上工作了。
lookupfield.init($('#input-field'), {
source: ['Apple', 'Banana', 'Orange']
});在 initData 选项中，source 属性是必选项，而且它还可以接受一个函数作为源，用于动态加载数据源，例如：
-- -------------------- ---- -------
----------------------------------- -
------- --------------- --------- -
--------
---- -------------------- - ------
-------- -------------- -
---------------
-
---
-
---当用户在输入框中输入文字时，lookupfield 会调用源函数，并将输入的文本传递给函数。函数返回的数据将会在下拉列表中显示出来。
除了 source 属性之外，lookupfield 还提供了多种选项和事件。详细的配置选项请参考文档。
示例代码
接下来我们来看一个实例，该实例演示了如何在一个表单中使用 lookupfield。
HTML:
-- -------------------- ---- -------
------
---- -------------------
------ -----------------------------
------ ----------- -------------------- --------------- ------------------ ------
------
---- -------------------
------ -------------------------------
------ ------------ -------------------- ---------------- ------------------ -------
------
---- -------------------
------ -------------------------------
------ ----------- -------------------- ---------------- ------------------ -------
------
------- ------------- ---------- ----------------------------
-------JavaScript:
import lookupfield from 'lookupfield';
lookupfield.init($('#input-fruit'), {
source: ['Apple', 'Banana', 'Orange'],
select: function(event, ui) {
$('#input-fruit').val(ui.item.value);
}
});这里我们将 lookupfield 绑定在 ID 为 input-fruit 的输入框上，并传递了一个数据源数组。当用户在 input-fruit 中输入值时，lookupfield 会在下拉列表中显示相关的数据源。用户选择一项后，会触发 select 事件，我们在此事件中将所选项的值赋值给 input-fruit 即可。
结语
lookupfield 是一个非常实用的前端开发工具，通过它我们可以轻松实现对数据的查找和选取，节省了我们大量的时间和精力。希望这篇文章能够帮助您更好地使用 lookupfield，并带来更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1381e8991b448e6d9e