Получить индекс выбранного значения из выпадающего списка ввода / Различить повторяющиеся значения

Question

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

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

В поле ввода при вводе «Имя» в раскрывающемся списке будут показаны значения Имя1, Имя2, Name2. Допустим, пользователь выбирает вторую запись («Имя2»), как я могу тогда сказать, выбрал ли он значение «Имя2» с соответствующим идентификатором: 2 или значение с идентификатором 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>