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

Posted 2023-05-08

【中文标题】自动完成选择名称并将 id 插入隐藏输入

【英文标题】：Autocomplete select name and insert id to hidden input

【发布时间】：2019-09-30 05:24:23

【问题描述】：

我知道有很多与这个主题相关的答案，但是我尝试了一天使用它们来解决我的问题，但我做不到，可能是因为我不熟悉 JQuery 和 Autocomplete 小部件。 这是我使用的代码，它工作正常。问题是，它插入的是名称而不是 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"
]

【参考方案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>