0

Tenho o seguinte autocomplete definido no 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>

O autocomplete está a funcionar bem, os dados da BD estão a ser buscados. Como é que posso agora em jQUERY ir buscar o ID do elemento selecionado?

Já tentei isto: $("option[name=ent] :selected").attr('id'); mas retorna undefined. Alguma Sugestão?

2 Respostas 2

1

O Funconamento do dataList é um pouco diferente do select, você terá que filtrar manualmente o dataList.

abaixo segue um exemplo com um 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

5
  • Não me parece que seja isso, voltou a retornar undefined :S Commented 6/02/2015 às 11:55
  • neste caso não deve ter nenhuma option com a propriedade selected. Commented 6/02/2015 às 11:57
  • Eu nem sei se esse selected é bem aplicado, eu quero é ir buscar o id do nome que fui buscar ao autocomplete. Commented 6/02/2015 às 11:59
  • não tinha notado que se tratava de um dataList e não de um select. vou atualizar a resposta. Commented 6/02/2015 às 12:06
  • Obrigado pelo exemplo fornecido. De qualquer das formas, o exemplo acima encaixa muito bem no que pretendo. Obrigado Commented 6/02/2015 às 12:14
1

Se você tentar colocar o valor de "name" entre aspas?

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

Editado:

Alias, se você fizer function dadosCliente(){ $(this).val(); } não vai funcionar melhor?

Editado 2: A "única" solução que eu achei, baseando-me nas informações que você passou, foi:

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

7
  • Continua 'undefined' :s se eu tirar o ':selected' retorna-me sempre o valor 2, não sei porque razão Commented 6/02/2015 às 11:37
  • veja a edição da minha resposta Commented 6/02/2015 às 11:37
  • dessa forma aparece: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined Commented 6/02/2015 às 11:40
  • o que tem na função dadosCliente? Ela é usada mais de uma vez? Commented 6/02/2015 às 11:42
  • 1
    A solução do Editado2 Eestá a funcionar muito bem. Muito Obrigado Commented 6/02/2015 às 12:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .