JQuery UI Autocomplete source用法及代码示例

用法:

source

• Array: 数组可用于本地数据。有两种支持的格式：
  • 字符串数组：[ "Choice1", "Choice2" ]
  • 具有 label 和 value 属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]
  标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将同时用于这两个属性，例如，如果您只提供value属性，该值也将用作标签。
• String：使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上(必须支持 CORS)。自动完成插件不过滤结果，而是添加了一个查询字符串term字段，服务器端脚本应该使用它来过滤结果。例如，如果source选项设置为"https://example.com"和用户类型foo，将发出 GET 请求https://example.com?term=foo.数据本身可以采用与上述本地数据相同的格式。
• Function：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成，包括 JSONP。回调有两个参数：
  • 一个 request 对象，具有单个 term 属性，它引用文本输入中当前的值。例如，如果用户在城市字段中输入 "new yo"，则自动完成项将等于 "new yo" 。
  • response 回调，它需要一个参数：向用户建议的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式。在请求期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，也必须始终调用 response 回调。这确保了小部件始终具有正确的状态。

  在本地过滤数据时，可以使用内置的$.ui.autocomplete.escapeRegex 函数。它将采用单个字符串参数并转义所有正则表达式字符，使结果可以安全地传递给 new RegExp() 。

代码示例：

使用指定的 source 选项初始化自动完成：

$( ".selector" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

初始化后获取或设置source选项：

// Getter
var source = $( ".selector" ).autocomplete( "option", "source" );
 
// Setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );