jQuery Autocomplete

jQuery Autocomplete是一个基于jQuery库的自动补全组件，适用于所有现代浏览器和移动设备。它是一款功能强大的工具，可以帮助您实现自动完成的搜索框，减少用户输入时间和繁琐性，提高用户体验。

用法

使用jQuery Autocomplete只需要3步操作。

引入jQuery库和jQuery Autocomplete库。在html文件的 <head> 标签内加入以下代码：

<link rel="stylesheet" href="//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>

编写一个输入框，为其绑定Autocomplete方法。

<input id="autocomplete-input" type="text" />
<script>
$(function() {
    $("#autocomplete-input").autocomplete({
        source: ["apple", "banana", "orange", "pear"]
    });
});
</script>

3.为Autocomplete绑定数据源。下面的示例将从一个url获取数据，但您也可以将数组、函数或其他形式的数据传递给Autocomplete。

$(function() {
    $("#autocomplete-input").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://example.com/api/search",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    });
});

配置项

在使用Autocomplete时，您可以通过配置项更改其内部行为和外观。

source

Autocomplete中最基本的配置项，设置为需要搜索的数据源。常见的类型包括字符串数组、函数和基于Ajax的接口。

minLength

设置用户输入的最少字符数，直到开始搜索和显示自动完成列表。默认值是1。

delay

为了防止每次键入都立即搜索，Autocomplete提供了一个延迟时间，只有停止键入一段时间后才开始搜索。默认值是300ms。

autoFocus

设置是否让第一个提示被选中。默认值是false。

position

设置自动完成列表的位置，通常使用"my"，“at"和"of"元素。默认值是"my"左上角，“at"输入框下方，“of"整个窗口。

select

当用户使用鼠标或键盘从列表中选择一个提示时调用的函数，可以获取选择的值、列表和事件。

focus

当用户悬停在列表中一个项上时调用的函数，同样可以获取悬停的值、列表和事件。

disabled

将Autocomplete禁用，无法选择提示。默认值是false。

autofocus

当Autocomplete处于禁用或用户无法与它交互状态下时，自动使输入框获得焦点。默认值是false。

注意事项

不同的浏览器对CSS限制不同，可能导致自动完成列表出现在诸如滚动窗口之类的问题上。可以使用CSS修复。
如果Autocomplete需要从远程接口获取数据，请确保调用正确的API并配置适当的CORS头。
未配置的Autocomplete可能会出现意料之外的行为，具体取决于您的数据源和需求。

结束语

jQuery Autocomplete是一款非常实用的自动完成组件，可以提高用户体验和效率，很容易地在任何网站上使用。熟练的使用Autocomplete可以大大提高前端开发人员的效率和工作质量。

jQuery AJAX 方法 jQuery Callback 方法