使用 jQuery 自动完成关闭 - Javascript

在前端开发中，我们经常会用到 jQuery 来操作 DOM 元素。其中一个常见的需求就是在用户输入框输入文字时，自动提示相关的选项，并在用户选中一个选项后自动完成输入。这个功能被称为自动完成（Autocomplete），在 jQuery 中，我们可以使用 autocomplete 插件来实现。

基本用法

使用 autocomplete 插件实现自动完成的基本用法非常简单。我们只需要在要实现自动完成的输入框上调用 autocomplete() 方法，然后传入一个选项对象即可。选项对象中必须包含一个 source 属性，它指定了自动完成要使用的数据源。示例代码如下：

$("#inputBox").autocomplete({
    source: ['张三', '李四', '王五', '赵六']
});

在上述代码中，我们给一个 id 为 inputBox 的输入框添加了自动完成功能，并指定了一个包含四个字符串的数组作为数据源。这意味着，在用户输入时，只要输入框中的文本与数组中的任一字符串匹配，就会下拉出一个菜单供用户选择。

自定义选项

autocomplete 插件提供了许多配置选项，可以让我们根据特定需求对自动完成进行自定义。以下是一些常用选项的介绍。

source

source 选项可接收多种类型的值：

• 数组：表示使用静态数组作为数据源；
• 字符串：表示在指定的 URL 上进行异步加载，并使用返回的数据作为数据源；
• 函数：表示自定义数据源处理函数。

minLength

minLength 选项指定输入框中文本的最小长度，当文本长度达到该值时才触发自动完成。默认值为 1。

autoFocus

autoFocus 选项指定是否自动选中第一项。默认为 false，如果设置为 true，则自动选中第一项。

delay

delay 选项指定触发自动完成的延迟时间，单位为毫秒。默认值为 300。

select

select 事件在用户选中自动完成项时触发。可以在该事件中执行一些额外的操作，比如自动提交表单。示例代码：

$("#inputBox").autocomplete({
    source: ['张三', '李四', '王五', '赵六'],
    select: function(event, ui) {
        // 当用户选中一个自动完成项时触发
        console.log(ui.item.value + "被选中了");
    }
});

close

close 事件在自动完成菜单关闭时触发。可以在该事件中执行一些额外的操作，比如让输入框获得焦点。示例代码：

$("#inputBox").autocomplete({
    source: ['张三', '李四', '王五', '赵六'],
    close: function(event, ui) {
        // 当自动完成菜单关闭时触发
        $("#inputBox").focus();
    }
});

自动完成关闭

如果我们想在用户选择一个自动完成项后自动关闭自动完成菜单，怎么办呢？可以使用 autocomplete 插件提供的 close() 方法。该方法可以手动关闭自动完成菜单。示例代码如下：

$("#inputBox").autocomplete({
    source: ['张三', '李四', '王五', '赵六'],
    select: function(event, ui) {
        // 当用户选中一个自动完成项时触发
        $("#inputBox").val(ui.item.value);
        $("#inputBox").autocomplete("close");
    }
});

在上述代码中，我们在 select 事件中手动调用了 close() 方法，以确保用户选中一个自动完成项后自动关闭自动完成菜单。

以上就是使用 jQuery 实现自动完成关闭的方法介绍，希望对大家有所帮助。