Receive id from an autocomplete option

Asked

Viewed 787 times

0

I have the following autocomplete defined in HTML

HTML

<label class="input">
  <input type="text" list="list" id="entidade" placeholder="Cliente" onblur="dadosCliente ( )">
  <datalist id="list">
    @for(entidade <- entidades) {
    <option name="ent" id="@entidade.getId()" value="@entidade.getNome()">@entidade.getNome()</option>
 }
</datalist> </label>

The autocomplete is working well, BD data is being searched. How can I now at jQUERY fetch the ID of the selected element?

I’ve tried this: $("option[name=ent] :selected").attr('id'); but returns Undefined. Any Suggestion?

javascript jquery intellij-idea self-cmplete

2 answers

1

If you try to quote the value of "name"?

$("option[name='ent'] :selected").attr('id');

Edited:

Alias, if you do function dadosCliente(){ $(this).val(); } won’t work better?

Edited 2: The "only" solution I found, based on the information you passed on, was:

$("#entidade").blur(function(){ var valor = $(this).val(); $("#list option").each(function(){ if( $(this).val() == valor ) console.log( $(this).attr('id') ); }); });

  • Continue 'Undefined' :s if I take ':Selected' returns me always the value 2, I don’t know why

  • see the edition of my reply

  • thus appears: Uncaught Typeerror: Cannot read Property 'toLowerCase' of Undefined

  • what’s in the data function? It is used more than once?

  • Not only is it used by losing the focus of that field, nothing else, and right now I’m just trying to get the id of the item I chose by autocomplete. var name = $('#entity'). val(); which returns the name I selected for this field.

  • remember to put the function inside $(document).ready() Or on onblur pass this.value in the function, and in the receive function as a variable

  • 1

    Edited’s solution2 And it’s working great. Thank you very much

Show 2 more comments

1


Running the dataList is slightly different from select, you will have to manually filter the dataList.

below follows an example with a dataList:

HTML

<input id="txtID" list="ent" />
<datalist id="ent">    
    <option id="001" value="Valor 001"></option>
    <option id="002" value="Valor 002"></option>
    <option id="003" value="Valor 003"></option>
    <option id="004" value="Valor 004"></option>
</datalist>
<button id="btGetID">Get ID</button>
<br />
<label id="lblID"></label>

JS

var btGetID = $("#btGetID");
var lblID = $("#lblID");
var txtID = $("#txtID");
var dataList = $("#ent");

btGetID.click(function () {
    var value = txtID.val();
    var option = $("option", dataList).filter(function () {
        return this.value == value;
    });
    console.log(option);
    lblID.html(option.attr("id"));
});

JSFIDDLE

  • I don’t think so, returned Undefined :S

  • in this case should have no option with the Selected property.

  • I don’t even know if this Selected is well applied, I want to get the id of the name I got from the autocomplete.

  • had not noticed that it was a dataList and not a select. I will update the answer.

  • Thanks for the example provided. Either way, the above example fits very well in what I intend. Thank you

Browser other questions tagged javascript jquery intellij-idea self-cmplete

You are not signed in. Login or sign up in order to post.