# 使用 jQuery UI AutoComplete 实现仅允许选择建议列表中的值
在Web开发中，用户输入自动完成是一种常见的交互方式，可以提高用户体验。jQuery UI库提供了一个强大的AutoComplete组件，可以轻松实现这一功能。然而，有时候我们需要限制用户只能从建议列表中选择值，而不允许手动输入。本文将介绍如何使用jQuery UI AutoComplete来实现这一目标，并提供一个简单的案例代码。## 引入jQuery和jQuery UI首先，确保在项目中引入了jQuery和jQuery UI的库文件。可以通过以下方式在HTML中添加引用：html## 实现只允许选择建议列表中的值在AutoComplete的初始化过程中，我们可以使用`source`选项来指定建议列表的数据源。通过设置`select`事件，我们可以确保用户只能选择列表中的值，而不能手动输入。AutoComplete 示例
html在上面的代码中，我们通过`source`选项指定了建议列表的数据源，即`availableTags`数组。在`select`事件中，我们使用`event.preventDefault()`来阻止用户手动输入，然后将选择的值设置到输入框中。## 通过使用jQuery UI AutoComplete组件，我们可以轻松实现只允许用户从建议列表中选择值的功能。通过设置`select`事件，我们可以有效地控制用户输入，提高用户体验。在实际项目中，可以根据需求定制建议列表的数据源和样式，以满足特定的设计和功能要求。希望这个简单的示例能够帮助你更好地使用jQuery UI AutoComplete组件。