在前端开发中，自动完成（Autocomplete）是一种常见的功能。它可以帮助用户快速地输入数据，提高用户体验。而 jQuery UI 是一个广泛使用的 UI 框架，其中包含了自动完成组件。在本文中，我们将介绍如何使用 function() 和 Ajax 技术，在 jQuery UI 中实现自动完成功能。
1. 准备工作
在使用 jQuery UI 的自动完成组件之前，需要先引入相关的文件。其中，jQuery UI 的核心文件是必须的，同时还需要引入 jQuery 库和相关的 CSS 文件。以下是引入文件的代码：
<!-- 引入 jQuery 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 jQuery UI 核心文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.1/jquery-ui.min.css">
2. 实现自动完成
在准备工作完成后，接下来就可以实现自动完成功能了。首先，需要在 HTML 中添加一个输入框：
<input id="autocomplete-input" type="text">
接着，在 JavaScript 中使用 function() 方法定义数据源，并使用 Ajax 从后台获取数据。这里我们假设后台返回的数据格式为 JSON，包含 id 和 name 两个字段。以下是示例代码：
-- -------------------- ---- -------
---------------------------------------
------- ----------------- --------- -
--------
---- --------------------------
--------- -------
----- -
------ ------------
--
-------- -------------- -
--- ------- - ----------- -------------- -
------ -
--- --------
------ ---------
--
---
------------------
-
---
-
---在上面的代码中，source 参数传入了一个函数，该函数使用 Ajax 从后台获取数据。其中，request.term 表示输入框中的文本，将作为查询参数发送到后台。response() 方法用来处理从后台返回的结果，并将其转换成自动完成组件能够使用的格式。最终，返回的结果包含 id 和 value 两个字段，其中 value 对应输入框中的文本。
3. 总结
通过使用 function() 和 Ajax 技术，在 jQuery UI 中实现自动完成功能非常简单。以上就是实现自动完成的详细步骤和示例代码。希望本文对你有所帮助，同时也鼓励你尝试更多的前端开发技术，不断提升自己的技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13072