jQuery UI 自动完成类选项介绍

jQuery UI是jQuery的一个扩展套件，其中包含了大量UI组件和交互功能。其中自动完成类选项是其中之一，通过它可以快速实现输入框的自动完成功能。

如何使用自动完成类选项

首先需要在HTML中引入相应的jQuery和jQuery UI文件：

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

然后在输入框上调用autocomplete()方法即可启用自动完成功能：

<input type="text" id="myInput">
<script>
  $( "#myInput" ).autocomplete({
    source: [ "apple", "banana", "cherry", "date", "elderberry", "fig" ]
  });
</script>

上述代码使用了一个字符串数组作为自动完成功能的源数据。现在当您在输入框中输入“a”时，将会自动弹出一个下拉框展示所有以“a”开头的选项。

如何自定义自动完成类选项

除了基本的用法外，自动完成类选项还支持大量的配置选项和事件回调。以下是一些常用的选项和回调函数：

source

source属性指定了自动完成的源数据。它可以是一个数组，也可以是一个返回数组的函数。

$( "#myInput" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "search.php",
      data: { term: request.term },
      dataType: "json",
      success: function( data ) {
        response( data );
      }
    });
  }
});

上述代码演示了如何从服务器动态加载自动完成的数据。

minLength

minLength属性指定了用户在开始搜索之前需要键入的最小字符数。默认值为1。

$( "#myInput" ).autocomplete({
  source: [ "apple", "banana", "cherry", "date", "elderberry", "fig" ],
  minLength: 2
});

上述代码指定了用户必须键入至少2个字符才会开始自动完成搜索。

autoFocus

autoFocus属性指定了是否在打开自动完成下拉框时自动选中第一项。默认值为false。

$( "#myInput" ).autocomplete({
  source: [ "apple", "banana", "cherry", "date", "elderberry", "fig" ],
  autoFocus: true
});

select

select事件在用户选择了一个自动完成选项时触发。它可以用来处理用户选择后的操作。

$( "#myInput" ).autocomplete({
  source: [ "apple", "banana", "cherry", "date", "elderberry", "fig" ],
  select: function( event, ui ) {
    alert( "您选择了：" + ui.item.value );
  }
});

上述代码使用了一个alert()函数来提示用户选择了哪个选项。

结论

jQuery UI 自动完成类选项是一个非常有用的工具，可以为您的输入框提供快速和智能的自动补全功能。通过使用各种选项和回调，您可以将这个工具定制得完全符合您的需求。