The value of the selected <datalist> element

Question

I use the <input type='text'> <datalist> along with <datalist> to provide name names for the form. Everything works as expected, and my entire user appears.

However, when the user submits the form, I would like to select the right user in my input-based data store. Unfortunately, the names are not unique, and there is a possibility of duplication. To avoid this, all my users have a unique identifier, which is also part of the <datalist> <options> tags.

Is there a way to read anything else besides the meaning of the input text? Is there a link to the selected data item? Can I get a user ID based on text input?

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

As you said, the name is not unique. so I added a duplicate name to your datalist.

 <input type="text" class="form-control" name="userName" placeholder="Type a user 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"/> 

and get the id 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

try this (jquery autocomplete):

Remember to specify Jquery.js and JqueryUI.js in your project

HTML

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