选定的项的值[重复]

Question

<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

尝试以下操作（JQuery自动完成）：

不要忘记在项目中引用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>

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