在前端开发中，自动完成（Auto Complete）是一种常见的功能。jQuery UI提供了一个完整的自动完成插件，使得实现自动完成功能变得非常简单。
自动完成的基本原理
自动完成的基本原理是监听输入框的input事件，获取输入框中的文本，然后向后台发送请求获取匹配的数据，并将匹配的数据展示在下拉框中。用户可以通过选择下拉框中的项来完成输入。
使用jQuery UI自动完成插件
使用jQuery UI自动完成插件需要引入以下两个文件：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
使用自动完成插件需要创建一个输入框和一个下拉框，代码如下：
<input id="autocomplete-input"> <div id="autocomplete-results"></div>
然后通过调用autocomplete()方法来初始化自动完成插件：
-- -------------------- ---- -------
---------------------------------------
------- ----------------- --------- -
-- ---------------
--------
---- --------------
----- -
-- ------------
--
-------- -------------- -
-- -----------
---------------
-
---
--
------- --------------- --- -
-- --------------------
---------------------
-
---在上述代码中，source属性指定了用于获取匹配数据的函数，该函数接收一个包含用户输入文本的对象和一个回调函数作为参数。当获取到数据后，使用回调函数将数据返回给插件。
select属性指定了用户选择下拉框中的项时触发的回调函数，该函数可以处理用户选择项的逻辑。
自动完成插件的高级用法
jQuery UI自动完成插件提供了许多可配置选项，可以满足不同场景下的需求。下面介绍一些常用的选项。
minLength
minLength选项指定开始搜索前用户必须输入的最小字符数。默认值为1。
$("#autocomplete-input").autocomplete({
minLength: 2
// ...
});delay
delay选项指定触发搜索事件前需要等待的毫秒数。默认值为300毫秒。
$("#autocomplete-input").autocomplete({
delay: 500
// ...
});position
position选项指定下拉框的位置。可以是字符串或者一个对象。
-- -------------------- ---- -------
---------------------------------------
--------- ------ ----
-- ---
---
---------------------------------------
--------- -
--- ----- --------
--- ----- -----
--- ---------------
-
-- ---
---总结
通过使用jQuery UI自动完成插件，我们可以轻松地实现自动完成功能。在实际应用中，还可以根据需求调整插件的可配置选项，以获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15297