JQuery Autocomplete не работает при использовании JSON

Question

Я хочу создать текстовое поле автозаполнения, чтобы отобразить имя и получить значение при выборе одного из них.

Im следуя учебник с этого сайта

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

Я хочу заменить данные var, записанные выше, моим JSON. вот что мой 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', 

еще не везёт .. im довольно новый для JQuery a nd также 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