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,output

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

使用JSON时，JQuery Autocomplete不起作用

2 个答案: