Автозаполнение выберите имя и вставьте идентификатор в скрытый ввод

Question

Я понимаю, что есть много ответов, связанных с этой темой, однако я однажды пытался решить мою проблему, используя их, но не смог, может быть, потому что я не знаком с виджетом JQuery и автозаполнением. Вот код, который я использую, он отлично работает. Проблема в том, что он вставляет имя, а не идентификатор.

Вот скрипт JQuery:

$.getJSON('file.json', function(data){
  var autoComplete = [];
  for (var i = 0, len = data.length; i < len; i++) {
    autoComplete.push(data[i].name);
  }
  $('#user').autocomplete({
    source: autoComplete,
    minLength: 2,
    select: function(event, ui) {
      $('#id').val(ui.item.value);
    }
  });
});

Это HTML ввод:

<div class="ui-widget">
  <label for="user">User: </label>
  <input id="user">
</div>
<div class="ui-widget">
  <label for="id">ID: </label>
  <input id="id">
</div>

Содержимое файла JSON:

[
  {"name":"John","id":"111"},
  {"name":"Robert","id":"222"},
  {"name":"Sozi","id":"333"}
]

Answer 1

Попробуйте с JQuery ниже:

<script>
     $(function() {
     //Create array
        var array = {};
        $.getJSON('file.json', function(data){
        var autoComplete = [];
        for (var i = 0, len = data.length; i < len; i++) {
            autoComplete.push(data[i].name);
            //pass the id as value and key as name in array
            array[data[i].name] = data[i].id;
        }

        $('#user').autocomplete({
            source: autoComplete,
            minLength: 2,
            select: function(event, ui) {
            //get the value based on name from the array and put in input field
            $('#id').val(array[ui.item.value]);
            }
        });
        });
    });
  </script>

    <div class="ui-widget">
        <label for="user">User: </label>
        <input id="user">
    </div>
    <div class="ui-widget">
        <label for="id">ID: </label>
        <input id="id">
    </div>