jQuery UI的autocomplete source选项

jQuery UI Autocomplete是一个自动完成插件，可以根据用户输入的文本提供匹配的选项。source选项用于指定要搜索的数据源。本文将详细介绍source选项的语法和用法，并提供两个示例说明。

语法

以下是source选项的基本语法：

$(selector).autocomplete({
  source: data
});

在这个语法中，selector是要应用Autocomplete的元素选择器。data是一个包含要搜索的选项数组或一个返回数组的函数。

示例1：使用静态数组

以下是一个示例，演示如何使用静态数组作为source选的值：

var data = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COB",
  "ColdFusion",
  "Erlang",
 Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$( "#autocomplete" ).autocomplete({
  source: data
});

在这个示例中，我们使用一个静态数组作为source选项的值。这个数组包含了一些编程语言的名称。当用户在输入框中文本时，Autocomplete将搜索这个数组，并显示匹配的选项。

示例2：使用动态函数

以下是另一个示例，示如何使用动态函数作为source选项的值：

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

在这个示例中，我们使用一个动态函数作为source选项的值。当用户在输入框中输入文本时，Autocomplete将调用这个函数，并将用户输入的文本作为参数传递给它。这个函数将`jQuery.ajax方法向服务器发送一个请求，并返回一个包含匹配选项的数组。

综上所述，source选项用于指定要搜索的数据源。本文详细介绍了source选项的语法和用法，并提供了两个示例说明。