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" ] );