Jump to content
FabianoSouza

Evento Click em datalist

Recommended Posts

Comecei a usar datalist hoje.

 

Duas coisas que ainda não entendi:

1) Como faz para definir function para o evento click ou evento change da datalist?

2) Como faço para pegar o valor do option clicado da datalist?

 

Os options da tag datalist não são como options da tag select?? Que  permite definir um valor para "value" e outro para para  exibição ao usuário?

Help!

Share this post


Link to post
Share on other sites

Isso acho que resolve usa duvida, mas tem em mente uma coisa

 - "select" é um input nativo nos browsers, então existem eventos já agregados a ele

-  "datalist" embora seja nativo foi criado para dar liberdade de customização isso inclui tb os eventos

 

HTML:

<body>
 <p> using default structure</p> 
 <input list="browsers" />
 <datalist id="browsers">
   <option value="Chrome">Chromezinho</option>
   <option value="Firefox">
   <option value="Internet Explorer">
   <option value="Opera">
   <option value="Safari">
 </datalist>
  
  
 <p> custom label and value</p> 
 <input list="browsers2" />
 <datalist id="browsers2">
   <option data-value="chrome">Chrome</option>
   <option data-value="firefox">Firefox</option>
   <option data-value="internet-explorer">Internet Explorer</option>
   <option data-value="opera">Opera</option>
   <option data-value="safari">Safari</option>
 </datalist>
</body>

JS:

// versão padrão sem label
var datalist = document.querySelector('[list="browsers"]');

datalist.addEventListener('change', function(){
  console.log(this.value);
});

// versão com label
var datalistInput = document.querySelector('[list="browsers2"]');
var datalistOptions = document.getElementById('browsers2');

datalistInput.addEventListener('change', function(){
  const optionSelected = Array.from(datalistOptions.children).find(option => option.label === this.value);

  console.log(optionSelected.dataset.value);
});

JsBin test: https://jsbin.com/popibocawo/edit?html,js,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By FabianoSouza
      Montei uma estrutura para preencher um datalist associado a uma input text (para fazer a busca na datalist).
      O problema é que quando se trata de palavras que tenham espaço na string, o "autocompletar" não funciona.
       
      No caso é para selecionar cidades. Então se digitar Diadema, a datalsit funciona,  lista o nome da cidade e ao clicar nela, passa o valor para a input text.
       
      Mas se escrever São Paulo, já não lê depois que pressiono a barra de espaço.
      Já chequei o a string recebida, as cidades estão vindo completas. Mas ocorre algum erro na hora de criar os options.
       
      Como resolvo?
       
      Esse é o HTML
      <input type="text" name="cidade" id="cidadeDigitada" list="cidades" placeholder="Sua cidade" autocomplete="off"> <datalist id="cidades"></datalist>  
      Tenho essa function que traz os dados em JSON do backend e preenche uma datalist. isso está funcionando perfeitamente.
      function selCidades() { var obj={url:'/backend/selecionar/'} , listCidades = document.querySelector('#cidades') , str='' , json='' , i=''; server.ajax(obj, function(){ json = server.res for (var i=0; i < json.length;++i){ str += '<option id=' +json[i].id + ' value=' +json[i].titulo+'>'; // Guarda options em variável } listCidades.innerHTML = str; }); }  
       
    • By polocal
      Oi galera, eu to com um "pequeno" probleminha...
      Eu quero um select que quando você vai digitando ele vai procurando e preenchendo sozinho
      Exemplo:

      Mas ele fica assim:


      Ele mostra a ID do usuario, e não o nome do usuario para me fazer a consulta
      Eu tenho o seguinte código:

      <input list="usuarios" name="usuarios">
      <datalist id="usuarios"> <option value="">SELECIONE</option>
      <?php $sql = mysql_query("SELECT * FROM clientes ORDER BY nome ASC") or die(mysql_error()); while($d = mysql_fetch_assoc($sql)) { echo "<option value=\"{$d['id']}\""; { } echo ">{$d['nome']}</option>"; }
      ?></datalist>
      E por assim vai, ate completar todos os cliente do meu sistema
      So que tem um problema... quando executa esse codigo, ele mostra mostra a id do usuário como ta la em cima, eu achei um codigo que é: data-value="151", So que esse data-value, nao manda o id para o form e depois enviá-lo para o banco de dados
      Alguém pode me da uma luz? não consegui explica muito do que estou precisando mas caso tiver com duvida pergunta ai em baixo
      *ADM= SE EU TIVER COLOCADO O POST EM UM LUGAR ERRADO MOVE PARA MIM PF? PQ EU NÃO SEI ONDE ISSO SE ENCAIXA*
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.