jQuery UI的自動完成不工作

Question

這是我的JavaScript代碼：

<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() { 
    $("input#suggestZams").autocomplete({ 
     source: "content/prevadzky/zam/zam_json2.php?letter=all", 
     minLength: 1, 
     delay: 0, 
     select: function(event, ui) { 
      alert(1); 
     } 
    }); 
}); 
//]]> 
</script> 

這是我的HTML：

<input id="suggestZams" class="input" size="10" /> 

的URL zam_json2.php?letter=all返回此JSON：

[ 
{ "id": "31440", "value": "Andrej\u010d\u00e1k, Ing." }, 
{ "id": "31690", "value": "Alexovi\u010d , Ing." }, 
{ "id": "31796", "value": "Antoni\u010d , Ing." }, 
{ "id": "31989", "value": "Antolik , Ing." }, 
{ "id": "32010", "value": "Ambrozov\u00e1 RNDr., PhD." }, 
{ "id": "32014", "value": "Aksam\u00edt" }, 
{ "id": "32024", "value": "Angelovi\u010d" }, 
{ "id": "32102", "value": "Andrej\u010d\u00e1k" }, 
{ "id": "32168", "value": "Avukov\u00e1 , Ing." }, 
{ "id": "32177", "value": "Andr\u00e1\u0161" }, 
{ "id": "32181", "value": "Andrej\u010d\u00e1kov\u00e1 , Mgr." }, 
{ "id": "32403", "value": "Arend\u00e1\u0161 , Bc." }, 
{ "id": "47379", "value": "An\u010fal" }, 
{ "id": "47399", "value": "Adam\u00edk , Ing." }, 
{ "id": "50022", "value": "Abo\u0161i" }, 
{ "id": "50085", "value": "Armer\u00eda Olmedo , Ing." }, 
{ "id": "53468", "value": "Anto\u0161" }, 
{ "id": "54837", "value": "Adamec , Ing." }, 
{ "id": "56659", "value": "Apostolou" }, 
{ "id": "57820", "value": "Alez\u00e1r" }, 
{ "id": "58576", "value": "Andrej\u010d\u00e1k , Bc." }, 
{ "id": "58587", "value": "Aronov\u00e1 , Ing." }, 
{ "id": "58595", "value": "Abaffy , Bc." }, 
{ "id": "58607", "value": "Adamec , Bc." }, 
{ "id": "58643", "value": "Antu\u0161 , Ing." }, 
{ "id": "62277", "value": "Adam\u010d\u00e1k , Mgr." }, 
{ "id": "62379", "value": "Andruch" }, 
{ "id": "63415", "value": "Adamkovi\u010d , Ing." } 
] 

Answer 1

引用：

自動填充可以定製工作 與各種數據源，由剛 指定源的選項。一種數據 源可以是：

• 與本地數據
• 字符串，指定URL的Array
• 回調

當使用一個字符串，該 自動填充插件期望 字符串指向 將返回JSON數據的URL資源。它可以在 相同的主機上或不同的一個 （必須提供JSONP）。請求 參數「term」被添加到該 URL中。數據本身可以是與上述本地數據 相同的格式。

你在做什麼看起來很奇怪。我認爲您實際上需要編輯服務器端腳本，以便預期查詢字符串變量term而不是字母和返回字符串數組或{label, value}對象數組而不是{value，id}。

如果URL content/prevadzky/zam/zam_json2.php?letter=all是提供單詞的一次「完全」列表中，你可以做一些沿着這些路線：

$.getJSON("content/prevadzky/zam/zam_json2.php?letter=all", function(data) { 
    var datacopy = $.map(data, function(item) { 
     return { 
      label: item.value, 
      value: item.id 
     }; 
    }); 
    $("input#suggestZams").autocomplete({ 
     source: datacopy, 
     minLength: 1, 
     delay: 0, 
     select: function(event, ui) { 
      alert(typeof ui); 
     } 
    }); 
}); 

Answer 2

如果您想要從網址獲取數據，您必須爲源定義一個函數：

source: function(request, response) { 
    $.ajax({url: "content/prevadzky/zam/zam_json2.php?letter=all", 
      dataType: "json", 
      ... 
      }); 
    }, 
... 

編輯：

在它說的文檔：source可以是一個URL。在這種情況下，請嘗試將JSON響應更改爲在返回的對象中使用'label'而不是'id'。

Answer 3

這裏的腳本，在jQuery的1.5.1爲我工作。

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