如何从JSON数据获得价值到输入

Question

我尝试使用jQuery AutoComplete从JSON数据获得价值。但是看来我的代码不起作用。我想要当我键入它显示的省份时，然后选择省名时也将获得ID，然后放入Province_ID的输入值。

查看代码：

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

自动完成：

$(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数据：

[{"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"}];

任何帮助将不胜感激，谢谢。

Answer 1

jQueryui自动完成源属性仅接受特定格式的数据。它必须是至少标签和value属性的对象数组。您需要修改data变量以此格式。

我建议您在来自PHP的$结果变量中进行此操作，但是如果无法实现，则可以使用map（）数组的方法。请注意，您需要更新由于此更改而用于设置字段值的ui.item的属性。

最后，请注意，我已经使用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"}];

$(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" />