Ir para conteúdo

POWERED BY:

FabianoSouza

Evento Click em datalist

Por , em Javascript

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • FabianoSouza
      Datalist - erro em palavras compostas
      Por 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; }); }  
       
    • polocal
      html5 Datalist, data-value não registra no banco de dados
      Por 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*
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito