How to get value from json data to input

user_8556189 0
Viewed 46

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" class="form-control col-md-10"
                placeholder="Province Name" />
<input type="hidden" name="province_id" id="province_id" class="form-control>

autocomplete :

$(document).ready(function() {
var data = <?php echo json_encode($results); ?>;
$("#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.

autocomplete jquery
1 Answers

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" class="form-control col-md-10" placeholder="Province Name" />
<input type="text" name="province_id" id="province_id" class="form-control" />

user_5194130
Related