使用 JSON 时 JQuery 自动完成功能不起作用

Question

我想创建一个自动完成文本字段来显示名称并在我选择其中一个时获取值。

我正在学习本网站的教程

here

和成功。工作代码是这样的：

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

异步 ​​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,output

它从https://jsonblob.com/api/9ae66445-f11b-11e6-901d-295e753a8fe1获取数据

Answer 2

不确定你的意思。 只需用您的 json 替换 json