使用JSON jQuery用戶界面自動完成從URL

我使用jQuery UI的自動完成功能。我可以使用jQuery UI提供的示例進行操作，如下所示：使用JSON jQuery用戶界面自動完成從URL

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

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

此工作沒有任何問題。但我需要使用JSON作爲誰可以這樣檢索我的數據源：http://mysite.local/services/suggest.ashx?query=ball

如果我要去那個網址我得到JSON回來這樣的：

[{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

我如何使用我的網址作爲數據源？

我試圖改變源選項是這樣的：

$("#tags").autocomplete({ 
    source: "http://mysite.local/services/suggest.ashx" 
});

但它並不能幫助。我猜這個服務不知道在輸入字段中輸入了哪個關鍵字？

任何指針將是巨大的。

來源

2012-09-11 Kim Andersen

您需要更改源代碼以符合以下規格（在documentation概述了小部件）。源必須是包含的陣列（或返回包含數組）：

簡單的字符串，或：含有label屬性
目的，一個value屬性，或兩者。

如果由於某種原因，您無法更改遠程源返回的內容，則可以在數據成功檢索後對其進行轉換。這裏是你會怎麼做：

$("#tags").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "http://mysite.local/services/suggest.ashx", 
      data: { query: request.term }, 
      success: function (data) { 
       var transformed = $.map(data, function (el) { 
        return { 
         label: el.phrase, 
         id: el.id 
        }; 
       }); 
       response(transformed); 
      }, 
      error: function() { 
       response([]); 
      } 
     }); 
    }); 
});

正如你所看到的，你需要做的AJAX在一個函數傳遞給小部件的source選項調用自己。

的想法是使用$.map您陣列轉變成包含了自動完成構件可以解析元素的數組。

另請注意，傳遞給AJAX調用的data參數在用戶輸入一個詞語時最終應該爲?query=<term>。

來源

2012-09-11 13:22:46

感謝您的回答。我想我可以編輯返回的JSON到標籤和值而不是id和短語。但是，如果我更改返回的JSON，是否在我的示例中使用了正確的源代碼，還是必須以某種方式將輸入的文本發送到服務。我的意思是該服務接受一個名爲「查詢」的參數，所以在某種程度上，我想它也需要該參數發送給它。或者我完全離開這裏？ –

所以，如果你改變你的web服務返回正確的事情，但採取所謂的'query'的說法，你的代碼將類似於上面，除了你剛剛叫'響應（數據）'的'success'處理程序。換句話說，由於您正在更改發生的默認AJAX請求，因此您仍然必須自己做。 –

太好了，當我回到我的開發計算機時，我會嘗試一下。並通過寫入數據：{query：request.term}，web服務將被調用與正確的輸入作爲查詢參數吧？ –

使用JSON jQuery用戶界面自動完成從URL

回答

相關問題