30/08/24 - Hoje eu aprendi

Bruno Dantas — Fri, 30 Aug 2024 13:03:44 +0000

Datalist

O elemento <datalist> em HTML permite associar uma lista de opções a um campo de entrada <input>.

Isso proporciona ao usuário sugestões enquanto ele digita, facilitando o preenchimento do campo com base em uma lista pré-definida.

É uma maneira eficiente de guiar o usuário sem restringir suas opções, já que ele pode tanto escolher um dos valores sugeridos quanto inserir um valor personalizado.

Da uma olhada nesse exemplo:

<label for="ice-cream-choice">Escolha um sabor:</label>

<!-- Aqui está o input que será preenchido pelo usuário. O atributo "list" referencia o id do datalist associado -->
<input list="ice-cream-flavors" id="ice-cream-choice"/>

<!-- Esta é a lista de valores que sugeriremos ao usuário conforme ele for digitando. 
     Vale lembrar que o usuário pode escolher um valor da lista ou digitar algo diferente. -->
<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coco"></option>
  <option value="Hortelã"></option>
  <option value="Morango"></option>
  <option value="Baunilha"></option>
</datalist>

❗Importante❗

Se você quiser limitar o usuário as opções pré-definidas, temos como opções:

Usar o input . Essa opção é interessante se você preferir que o usuário escolha entre uma lista e não digite nada.
Usar o javascript para validar o que o usuário digitou no input com base no datalist

Vou deixar aqui um exemplo do javascript validando o input que o GPT fez pra mim


  <label for="ice-cream-choice">Escolha um sabor:</label>

  <input list="ice-cream-flavors" id="ice-cream-choice" name="flavor" required />

  <datalist id="ice-cream-flavors">
    <option value="Chocolate"></option>
    <option value="Coco"></option>
    <option value="Hortelã"></option>
    <option value="Morango"></option>
    <option value="Baunilha"></option>
  </datalist>

  <!-- Span para exibir a mensagem de erro -->
  <span id="error-message" style="color: red; display: none;">Por favor, escolha um sabor válido da lista.</span>


<script>
  document.getElementById('ice-cream-choice').addEventListener('blur', function() {
    const input = document.getElementById('ice-cream-choice');
    const datalist = document.getElementById('ice-cream-flavors');
    const errorMessage = document.getElementById('error-message');
    const options = Array.from(datalist.options).map(option => option.value);

    if (!options.includes(input.value)) {
      errorMessage.style.display = 'inline'; // Exibe a mensagem de erro
      input.value = ''; // Limpa o campo se o valor for inválido
    } else {
      errorMessage.style.display = 'none'; // Esconde a mensagem de erro se o valor for válido
    }
  });
</script>

DEV Community: Bruno Dantas

30/08/24 - Hoje eu aprendi

Datalist