自动完成 select 名称并将 id 插入隐藏输入

Question

我知道有很多与此主题相关的答案，但是我尝试了一天使用它们来解决我的问题，但我做不到，可能是因为我不熟悉 JQuery 和自动完成小部件. 这是我使用的代码，它工作正常。问题是，它插入的是名称而不是 ID。

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

自动完成 select 名称并将 id 插入隐藏输入

Autocomplete select name and insert id to hidden input

jquery

json

autocomplete