使用JSON時，jQuery自動完成功能不起作用

Question

我想創建一個自動完成文本字段來顯示名稱，並在選擇其中一個時獲取值。

我正在關注本網站的教程

這里

和成功。 工作代碼如下：

var data = [
        { value: "AL", label: "Alabama" },
        { value: "AK", label: "Alaska" },
        { value: "AZ", label: "Arizona" }
];
$(function() {
        $("#autocomplete2").autocomplete({
            source: data,
            focus: function(event, ui) {
                event.preventDefault();
                $(this).val(ui.item.label);
            },
            select: function(event, ui) {
                event.preventDefault();
                $(this).val(ui.item.label);
                $("#autocomplete2-value").val(ui.item.value);
            }
        });
    });

我想用JSON替換上面寫的var數據。 這是我的JSON的樣子

[{"value":"1","label":"Gambir"},{"value":"2","label":"Kebon Kelapa"},{"value":"3","label":"Petojo Utara"}]

我想做這個

var data = [
        here would be data from my json,
        the JSON url: app.base_url+'adm/pengiriman/pengiriman_kodepos'
        how to write code to retrieve JSON in here?
];
$(function() {
    $("#autocomplete2").autocomplete({
        source: data,
        focus: function(event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
        },
        select: function(event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $("#autocomplete2-value").val(ui.item.value);
        }
    });
});

但是，這樣做的正確方法是什么？ 我嘗試從中修改源：

source: data,

變成這個：

source: function (request, response) {
    $.getJSON(app.base_url+'adm/pengiriman/pengiriman_kodepos', function (data) {
         response($.map(data, function (value, key) {
             return {
                 label: value,
                 value: key
             };
          }));
     });
},

或這個：

source: function(request, response) {
              $.ajax({
                url: app.base_url+'adm/pengiriman/pengiriman_kodepos',
                dataType: "json",
                data: { q: request.term },
                success: function(data) {
                  response($.map(data, function(value,key) {
                    return { label:value.label , value: value.value }
                  }));
                }
              });
            },

或這個：

source: app.base_url+'adm/pengiriman/pengiriman_kodepos',

仍然沒有運氣..我對JQuery和JSON還是很新的，感謝您的幫助。

Answer 1

不明白你的意思。 只需將json替換為您的json

Answer 2

一個異步的ajax請求，因此您必須使用回調並在其中創建自動完成ui。 請參見下面的代碼。 未經測試，因此您可能需要調整代碼，但這是可以完成的方法。

function getData(responseCallback) {
  $.getJSON(app.base_url + 'adm/pengiriman/pengiriman_kodepos', function(data) {
    responseCallback(data);
  });
}


function createAutocomplete(data) {
  $("#autocomplete2").autocomplete({
    source: data,
    focus: function(event, ui) {
      event.preventDefault();
      $(this).val(ui.item.label);
    },
    select: function(event, ui) {
      event.preventDefault();
      $(this).val(ui.item.label);
      $("#autocomplete2-value").val(ui.item.value);
    }
  });
}

getData(createAutocomplete);

我在這里創建了一個示例： https : //jsbin.com/subihohuje/1/edit?html，輸出

它從以下位置獲取數據： https : //jsonblob.com/api/9ae66445-f11b-11e6-901d-295e753a8fe1