jQuery UI 自动完成小部件完整参考

jQuery UI 自动完成小部件是一个用户输入引导的小部件，它可以帮助用户轻松地完成输入，减轻用户的负担。这个小部件是建立在 jQuery 库之上，可以很容易地配置和使用。

基本用法

要使用 jQuery UI 自动完成小部件，首先需要引入相应的库文件：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

然后，在 HTML 中，可以创建一个文本框，并初始化 jQuery UI 自动完成小部件：

<input id="myInput">
<script>
    $(function() {
        $("#myInput").autocomplete({
            source: ["example1", "example2", "example3"]
        });
    });
</script>

上面的代码将创建一个文本框并启用 jQuery UI 自动完成小部件。source 属性指定自动完成的选项列表，可以传入一个数组或一个 URL。

定制选项

除了 source 属性外，还有许多其他的选项可以用来定制 jQuery UI 自动完成小部件，例如：

• minLength：用户输入的最短字符数，如果用户输入不足此数值，则不会显示自动完成选项。
• delay：用户输入后多长时间开始搜索自动完成选项，单位为毫秒。
• appendTo：选项列表的容器元素。
• position：选项列表相对于输入框的位置。

完整的选项列表可以参考官方文档：https://api.jqueryui.com/autocomplete/

事件

jQuery UI 自动完成小部件也提供了多个事件，以便在自动完成过程中进行处理。例如：

• open：选项列表打开时触发。
• select：用户选中一个选项时触发。
• close：选项列表关闭时触发。

完整的事件列表可以参考官方文档：https://api.jqueryui.com/autocomplete/#events

主题

jQuery UI 自动完成小部件的外观可以通过定义主题来定制。可以使用 jQuery UI 官方提供的主题，也可以自定义主题。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .ui-autocomplete-custom {
        background-color: #fff;
        border: 1px solid #ccc;
        max-height: 150px;
        overflow-y: auto;
    }
</style>
<script>
    $(function() {
        $("#myInput").autocomplete({
            source: ["example1", "example2", "example3"],
            appendTo: ".ui-autocomplete-custom"
        });
    });
</script>
<div class="ui-autocomplete-custom"></div>
<input id="myInput">

上面的代码将定义一个自定义主题，并使用 appendTo 属性将选项列表容器元素指定为 ui-autocomplete-custom 类。输入框和选项列表的位置由 CSS 设置。

总结

jQuery UI 自动完成小部件是一个非常实用的小部件，它可以大大改善用户的输入体验。虽然它有很多选项和事件可以调整和处理，但是使用起来却非常简单。如果你还没有使用过 jQuery UI 自动完成小部件，不妨试试。