使用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