Menu
I am using a <input type='text'> Element together with a <datalist> to provide user name suggestions for a form. Everything works as expected and all my user show up.
However, when the user submits the form I would like select the right user in my data storage based on the input. Unfortunately, names are not unique and there is a chance for duplicates. To avoid this, all my users have a unique ID that is also part of the <datalist>'s <options> tags.
Is there any way I can read anything else but the input's text value? Is there a reference to the selected datalist element? Can I retrieve a user's id based on the text input?
<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>
691
Generally, both the tags are used for choosing an option from the given list. But the main difference between both is that in the <datalist> tag the user can enter its own input and add that as an option with the help of the <input> element whereas the <select> tag doesn't provide this feature.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Select input element presents options for the users from which they need to select one of them. On the otherhand, Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value.
You can see that each browser displays a tick mark for each datalist option provided. Additionally, Chrome will snap the slider to these predefined values as the user moves the slider near them. Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
As you said name are not unique. so i have added a duplicate name to your 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"/>
and getting the id of name
$('#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
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
