How to get value from json data to input-CodePudding

I tried to get value from JSON data to my input using jquery autocomplete. But it seems my code isn't working. I want when I type the province name it shows up then when I select the province name will also get the id and then put in the input value for province_id.

view code:

<input type="text" id="province" name="province" id="province" 
                placeholder="Province Name" />
<input type="hidden" name="province_id" id="province_id" #province").autocomplete({
  source: data,
  select: function(event, ui){
    $('[name="province"]').val(ui.item.province);
    $('[name="province_id"]').val(ui.item.province_id)
  }
});

var data :

[{"province_id":"1","province":"Bali"},{"province_id":"2","province":"Bangka Belitung"},{"province_id":"3","province":"Banten"},{"province_id":"4","province":"Bengkulu"},{"province_id":"5","province":"DI Yogyakarta"},{"province_id":"6","province":"DKI Jakarta"},{"province_id":"7","province":"Gorontalo"},{"province_id":"8","province":"Jambi"},{"province_id":"9","province":"Jawa Barat"},{"province_id":"10","province":"Jawa Tengah"},{"province_id":"11","province":"Jawa Timur"},{"province_id":"12","province":"Kalimantan Barat"},{"province_id":"13","province":"Kalimantan Selatan"},{"province_id":"14","province":"Kalimantan Tengah"},{"province_id":"15","province":"Kalimantan Timur"},{"province_id":"16","province":"Kalimantan Utara"},{"province_id":"17","province":"Kepulauan Riau"},{"province_id":"18","province":"Lampung"},{"province_id":"19","province":"Maluku"},{"province_id":"20","province":"Maluku Utara"},{"province_id":"21","province":"Nanggroe Aceh Darussalam (NAD)"},{"province_id":"22","province":"Nusa Tenggara Barat (NTB)"},{"province_id":"23","province":"Nusa Tenggara Timur (NTT)"},{"province_id":"24","province":"Papua"},{"province_id":"25","province":"Papua Barat"},{"province_id":"26","province":"Riau"},{"province_id":"27","province":"Sulawesi Barat"},{"province_id":"28","province":"Sulawesi Selatan"},{"province_id":"29","province":"Sulawesi Tengah"},{"province_id":"30","province":"Sulawesi Tenggara"},{"province_id":"31","province":"Sulawesi Utara"},{"province_id":"32","province":"Sumatera Barat"},{"province_id":"33","province":"Sumatera Selatan"},{"province_id":"34","province":"Sumatera Utara"}];

any help would be greatly appreciated, thank you.

CodePudding user response：

The jQueryUI autocomplete source property only accepts data in a specific format. It needs to be an array of objects with at least label and value properties. You need to amend your data variable to be in this format.

I would suggest doing this in your $results variable coming from PHP, however if it's not possible to achieve then you can use the map() method of the array instead. Note that you need to update the properties of ui.item that you use to set the field values because of this change.

Finally, note that I used id selectors for the fields as there are present on the elements already, and simpler and faster than attribute selectors.

var data = [{"province_id":"1","province":"Bali"},{"province_id":"2","province":"Bangka Belitung"},{"province_id":"3","province":"Banten"},{"province_id":"4","province":"Bengkulu"},{"province_id":"5","province":"DI Yogyakarta"},{"province_id":"6","province":"DKI Jakarta"},{"province_id":"7","province":"Gorontalo"},{"province_id":"8","province":"Jambi"},{"province_id":"9","province":"Jawa Barat"},{"province_id":"10","province":"Jawa Tengah"},{"province_id":"11","province":"Jawa Timur"},{"province_id":"12","province":"Kalimantan Barat"},{"province_id":"13","province":"Kalimantan Selatan"},{"province_id":"14","province":"Kalimantan Tengah"},{"province_id":"15","province":"Kalimantan Timur"},{"province_id":"16","province":"Kalimantan Utara"},{"province_id":"17","province":"Kepulauan Riau"},{"province_id":"18","province":"Lampung"},{"province_id":"19","province":"Maluku"},{"province_id":"20","province":"Maluku Utara"},{"province_id":"21","province":"Nanggroe Aceh Darussalam (NAD)"},{"province_id":"22","province":"Nusa Tenggara Barat (NTB)"},{"province_id":"23","province":"Nusa Tenggara Timur (NTT)"},{"province_id":"24","province":"Papua"},{"province_id":"25","province":"Papua Barat"},{"province_id":"26","province":"Riau"},{"province_id":"27","province":"Sulawesi Barat"},{"province_id":"28","province":"Sulawesi Selatan"},{"province_id":"29","province":"Sulawesi Tengah"},{"province_id":"30","province":"Sulawesi Tenggara"},{"province_id":"31","province":"Sulawesi Utara"},{"province_id":"32","province":"Sumatera Barat"},{"province_id":"33","province":"Sumatera Selatan"},{"province_id":"34","province":"Sumatera Utara"}];

$(document).ready(function() {
  let newData = data.map(o => ({ label: o.province, value: o.province_id }));

  $("#province").autocomplete({
    source: newData,
    select: function(event, ui) {
      event.preventDefault();
      $('#province').val(ui.item.label);
      $('#province_id').val(ui.item.value)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy D176RYoop1Da f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk 5zjwyJaoRUgCdOrfSDhmMID2u4 OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<input type="text" id="province" name="province" id="province"  placeholder="Province Name" />
<input type="text" name="province_id" id="province_id"  />