DEV Community

Bruno Dantas
Bruno Dantas

Posted on

30/08/24 - Hoje eu aprendi

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>

Enter fullscreen mode Exit fullscreen mode

❗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>

Enter fullscreen mode Exit fullscreen mode

Image of Bright Data

Ensure Data Quality Across Sources – Manage and normalize data effortlessly.

Maintain high-quality, consistent data across multiple sources with our efficient data management tools.

Manage Data

Top comments (0)

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay