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

Question

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

{name:"Name1",id:1},
{name:"Name2",id:2},
{name:"Name2",id:3}

在输入字段中输入 "Name "时，它将在下拉列表中显示Name1,Name2,Name2.假设用户选择了第二个条目("Name2")，那么我如何判断他选择的 "Name2 "的值是对应的id：2还是id为3的那个？

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

https:/jsfiddle.netzka067y33

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>