选择的价值 <datalist> 项目[复制]

Question

这个问题在这里已有答案：

• 显示datalist标签，但提交实际值 4个答案

我使用<input type='text'> Element和<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

正如你所说，名字不是唯一的。 所以我给你的datalist添加了一个重复的名字。

<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);
});

DEMO

Answer 2

试试这个（JQuery AutoComplete）：

别忘了在你的项目中引用Jquery.js和JqueryUI.js

HTML

<input id="input_autocomplete" type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" 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>

JAVASCRIPT和JQUERY

function GetValues() {
    $list = [];
    $('#user-datalist').children().each(function () {
        var value = $(this).val();
        var id = $(this).attr('id');
        var item = {
            id: id,
            value: value
        };
        $list.push(item);
    });
    return $list;
}


$(document).ready(function () {
    $('#input_autocomplete').autocomplete({
        source: GetValues(),
        change: function (event, ui) {
            alert(ui.item.id)
        }
    });
});