javascript - 从输入下拉列表中获取所选值的索引/区分重复值

Question

我目前正在努力实现一个搜索栏，该搜索栏会根据用户输入动态填充名称。每个名字都有一个对应的id。我可以从数据库请求 ID 和名称。 我允许在数据库中输入重复的名称。 为了简化事情，我们假设数据库具有以下值:

{name:"Name1",id:1}, {名称:"名称2",id:2}, {名称:“名称2”，id:3}

在输入字段中输入“名称”时，它会在下拉列表中显示值“名称1”、“名称2”、“名称2”。 假设用户选择了第二个条目(“Name2”)，那么我如何判断他选择的是相应 id 为 2 的“Name2”值还是 id 为 3 的值？

一个想法是以某种方式获取所选值的索引，但我不知道该怎么做。

https://jsfiddle.net/zka067y3/3/

Answer 1

尝试以下 jQuery 脚本和 HTML 代码。

$('#inputValues').on('input',function(){
    var g=$('input[type="text"]').val();  
  var id = $('#playernames').find('option').filter(function() { return $.trim( $(this).text() ) === g; }).attr('id');
    alert(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div> 
  <input id="inputValues" type="text" name="userName" list="playernames">
  <datalist id="playernames">
  <option value="Name1" id="1">Name1</option>
  <option value="Name2" id="2">Name2</option>
  <option value="Name2" id="3">Name2</option>
  </datalist>
</div>