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

Question

I want to make an autocomplete text field to display the name and get the value when i select one of them.

Im following the tutorial from this site

here

and success. the working code is like this:

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);
            }
        });
    });

I want to replace the var data written above with my JSON. here is what my JSON look like

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

i want to do this

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);
        }
    });
});

but, what is the proper way to do that? i try modify the source from this:

source: data,

become this:

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
             };
          }));
     });
},

or this:

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 }
                  }));
                }
              });
            },

or this:

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

still have no luck.. im pretty new to JQuery and also JSON thanks for any help..

Answer 1

Not sure what you mean. Just replace the json with your json

Answer 2

An ajax request in asynchronous, so you have to use a callback and create the autocomplete ui in that. Please see the code below. Not tested, so you may have to tweak the code, but this is how it can be done.

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);

I have created an example here : https://jsbin.com/subihohuje/1/edit?html,output

It gets data from : https://jsonblob.com/api/9ae66445-f11b-11e6-901d-295e753a8fe1