No desenvolvimento web, criar interfaces de usuário (UI) que sejam intuitivas e eficientes é uma prioridade. O elemento <datalist> do HTML5 proporciona uma forma simples de adicionar sugestões de autocompletar em campos de entrada (<input>). No entanto, suas funcionalidades básicas têm limitações que podem ser superadas com a ajuda do JavaScript. Neste artigo técnico, exploraremos como combinar <datalist> com JavaScript para criar uma experiência de autocompletar mais dinâmica e personalizada em formulários.

Introdução ao <datalist>

O elemento <datalist> permite associar uma lista de opções a um campo de entrada, oferecendo ao usuário uma lista de sugestões conforme ele digita. A sintaxe básica para criar um <datalist> é simples:

<label for="frutas">Escolha uma fruta:</label>
<input list="frutas" id="frutaEscolhida" name="frutaEscolhida">
<datalist id="frutas">
    <option value="Maçã">
    <option value="Banana">
    <option value="Laranja">
    <option value="Manga">
    <option value="Abacaxi">
</datalist>

No exemplo acima, ao digitar no campo de entrada, o usuário verá uma lista suspensa com as opções disponíveis, facilitando a seleção.

Limitações do <datalist> nativo

Apesar da sua utilidade, o <datalist> nativo apresenta algumas limitações que podem impactar a experiência do usuário:

Essas limitações tornam o <datalist> pouco adequado para formulários complexos ou que demandam uma personalização maior.

Bora codar juntos um gerenciador de metas?

embarcar na missão

Filtragem dinâmica com JavaScript

Uma forma de aprimorar o <datalist> é implementando a filtragem dinâmica das opções à medida que o usuário digita. Com JavaScript, podemos monitorar as entradas do usuário e ajustar as opções do <datalist> em tempo real:

<label for="cidade">Escolha uma cidade:</label>
<input list="cidades" id="cidadeEscolhida" name="cidadeEscolhida">
<datalist id="cidades"></datalist>

<script>
    const cidades = ['São Paulo', 'Rio de Janeiro', 'Belo Horizonte', 'Porto Alegre', 'Curitiba'];
    const datalist = document.getElementById('cidades');
    const input = document.getElementById('cidadeEscolhida');

    function atualizarDatalist() {
        const valorDigitado = input.value.toLowerCase();
        datalist.innerHTML = '';

        const cidadesFiltradas = cidades.filter(cidade => cidade.toLowerCase().includes(valorDigitado));
        cidadesFiltradas.forEach(cidade => {
            const option = document.createElement('option');
            option.value = cidade;
            datalist.appendChild(option);
        });
    }

    input.addEventListener('input', atualizarDatalist);
</script>

No exemplo acima, à medida que o usuário digita, a lista de cidades é filtrada para mostrar apenas as que contêm o texto inserido. Essa abordagem melhora a relevância das sugestões e proporciona uma experiência de usuário mais fluida.

Carregando opções dinamicamente de uma API

Outra melhoria significativa é a capacidade de carregar as opções do <datalist> dinamicamente a partir de uma API. Isso é particularmente útil em aplicações que precisam lidar com grandes volumes de dados ou com dados que mudam frequentemente:

<label for="pais">Escolha um país:</label>
<input list="paises" id="paisEscolhido" name="paisEscolhido">
<datalist id="paises"></datalist>

<script>
    async function carregarPaises() {
        const resposta = await fetch('https://restcountries.com/v3.1/all');
        const dados = await resposta.json();
        const datalist = document.getElementById('paises');

        dados.forEach(pais => {
            const option = document.createElement('option');
            option.value = pais.name.common;
            datalist.appendChild(option);
        });
    }

    carregarPaises();
</script>

Neste exemplo, as opções de países são carregadas de uma API REST que retorna uma lista de países. Assim, o <datalist> é preenchido dinamicamente, permitindo que o formulário seja sempre atualizado com os dados mais recentes.

Melhorando a acessibilidade e usabilidade

Bora codar juntos um gerenciador de metas?

embarcar na missão

Ao aprimorar o <datalist> com JavaScript, é importante garantir que a interface permaneça acessível a todos os usuários. Algumas boas práticas incluem:

Exemplo:

<label for="linguagem">Escolha uma linguagem de programação:</label>
<input list="linguagens" id="linguagemEscolhida" name="linguagemEscolhida">
<datalist id="linguagens"></datalist>
<p id="feedback" aria-live="polite"></p>

<script>
    const linguagens = ['JavaScript', 'Python', 'Java', 'C#', 'Ruby', 'Go', 'Swift'];
    const datalist = document.getElementById('linguagens');
    const input = document.getElementById('linguagemEscolhida');
    const feedback = document.getElementById('feedback');

    function atualizarDatalist() {
        const valorDigitado = input.value.toLowerCase();
        datalist.innerHTML = '';

        const linguagensFiltradas = linguagens.filter(linguagem => linguagem.toLowerCase().includes(valorDigitado));

        if (linguagensFiltradas.length === 0) {
            feedback.textContent = 'Nenhuma linguagem encontrada.';
        } else {
            feedback.textContent = '';
            linguagensFiltradas.forEach(linguagem => {
                const option = document.createElement('option');
                option.value = linguagem;
                datalist.appendChild(option);
            });
        }
    }

    input.addEventListener('input', atualizarDatalist);
</script>

Este exemplo proporciona uma experiência de usuário mais rica, informando quando nenhuma opção correspondente foi encontrada.

A combinação de <datalist> com JavaScript oferece uma maneira poderosa de criar formulários mais interativos e adaptáveis. Ao implementar filtragem dinâmica e carregamento de dados via API, você pode superar as limitações do <datalist> nativo, melhorando a experiência do usuário. Além disso, garantir que essas funcionalidades sejam acessíveis e usáveis para todos os públicos é crucial para o sucesso de sua aplicação. Experimente essas técnicas em seus próximos projetos e veja como elas podem transformar a interação do usuário com seus formulários.

Bora codar juntos um gerenciador de metas?

embarcar na missão