Question

我正在使用<input type='text'>元素和<datalist>来为表单提供用户名建议。一切都按预期工作，我的所有用户都会出现。

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

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

＆＃13;

<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>

＆＃13;

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

所选<datalist>项</datalist>的值

2 个答案: