所选<datalist>项的值

Question

我正在使用<input type='text'>Element和a <datalist>来为表单提供用户名建议.一切都按预期工作,我的所有用户都出现了.

但是,当用户提交表单时,我希望根据输入在我的数据存储中选择正确的用户.不幸的是,名称并不是唯一的,并且有可能存在重复.为了避免这种情况,我的所有用户都有一个唯一的ID也是一部分<datalist>的<options>标签.

除了输入的文本值,我有什么方法可以阅读其他内容吗？是否有对所选datalist元素的引用？我可以根据文本输入检索用户的ID吗？

<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>

<datalist id="user-datalist">
  <option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
  <option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
  <option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
  <option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>

Answer 1

正如你所说，名字并不独特。所以我在您的数据列表中添加了一个重复的名称。

<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>

<datalist id="user-datalist">
  <option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
    <option id="53c911ea60925sdfs4e444eg1" value="John Snow">John Snow</option>
  <option id="53c911ea60925sdfs4e444eg2" value="John Snow">John Snow</option>
  <option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
    <input type="button" id="sub" value="sub"/>

并获取名字的id

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

演示版