Как получить значение из данных json для ввода

Я попытался получить значение из данных JSON для ввода с помощью автозаполнения jquery. Но, похоже, мой код не работает. Я хочу, чтобы когда я набираю название провинции, оно отображалось, а затем, когда я выбираю название провинции, также получаю идентификатор, а затем ввожу входное значение для 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)
  }
});

переменные данные:

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

любая помощь будет принята с благодарностью, спасибо.

autocomplete jquery

17.05.2022 11:27

Формы c голосовым вводом в React с помощью Speechly

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Flatpickr: простой модуль календаря для вашего приложения на React

Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое cURL в PHP? Встроенные функции и пример GET запроса

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.

Четыре эффективных способа центрирования блочных элементов в CSS

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Свойство автозаполнения jQueryUI source принимает данные только в определенном формате. Это должен быть массив объектов как минимум со свойствами label и value. Вам нужно изменить переменную data, чтобы она была в этом формате.

Я бы предложил сделать это в вашей переменной $results, полученной из 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" />

17.05.2022 12:17

Другие вопросы по теме

Автодополнение параметра метода для экземпляра класса

Автозаполнение Javascript не очищает предложение без ввода

В Mui Autocomplete как вызвать функцию после выбора опции (не одновременно)

Как удалить одну команду из автозаполнения bash

Автозаполнение текста Tkinter

Coc.nvim автодополнение для threejs

Jquery Autocomplete не работает с разными данными

Максимальный стек вызовов превышен в автозаполнении jQuery

Запустите автозаполнение AlgoliaSearch, если текст запроса превышает 3-4 символа.

Jest: Material-UI: метод автозаполнения `getOptionLabel` вернул неопределенное значение вместо строки для {}

Как получить значение из данных json для ввода

Ответы 1

Другие вопросы по теме

Похожие вопросы