Value of selected item

Question

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>

If names are not unique how users can choose the right person from the suggestions? — idmean, Jul 28 '14 at 09:57
@wumm Lack of support in Safari isn't necessary a good enough reason to not use a certain feature, it all depends on the target audience. — rink.attendant.6, Jul 28 '14 at 10:13
Datalist's support a `label` attribute that can be used to differenciate between duplicates. (e.g. show email) — Tom, Jul 28 '14 at 11:12
@Tom and how do you use label attribute to differentiate between duplicates? For example, how your users know which John Snow they are choosing? — Michael, Jul 28 '14 at 14:17
@michaelmoore As far as I can tell the label attribute only shows a visual clue (e.g. email) in the dropdown. See this [picture](http://homeandlearn.co.uk/WD/images/chapter8/data_list_4.gif) — Tom, Jul 28 '14 at 20:54

Amit Kumar · Answer 1 · 2014-07-28T10:32:52.100

1

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

edited Jul 28 '14 at 10:32

answered Jul 28 '14 at 10:08

Amit Kumar

5,888
11
47
85

1

The names are not unique as the OP says. – idmean Jul 28 '14 at 10:15
@wumm: thanks for pointing out. but can you explain little more. what do you mean by that. – Amit Kumar Jul 28 '14 at 10:19
2

If in `datalist` there are two Mr. Smith both with another ID, let's say 24 and 63, your script will return `24` whether the first or the second Mr. Smith had been selected. – idmean Jul 28 '14 at 10:21
1

@wumm You are absolutely correct. Filtering by name is not an option in this case. Hence the question, whether I can access any other attribute than the input's `value`? – Tom Jul 28 '14 at 11:16

score 0 · Answer 2 · answered Mar 26 '15 at 13:36

try this (JQuery AutoComplete):

dont forget to reference Jquery.js and JqueryUI.js on your project

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

Value of selected item

2 Answers2

Linked