Datalist (HTML 5). Porque reinventar a roda ?

Essa semana em um dos muitos fóruns, sites, listas que participo surgiu uma questão sobre “autocompletar” e no meio das muitas sugestões, JavaScript, jQuery e outras o assunto me interessou e fui dar uma pesquisada, pois esse recurso é bem interessante de disponibilizar para os usuários dos sistemas web desenvolvidos.

Não é que o HTML 5, nos disponibiliza uma TAG com o nome de DATALIST que faz exatamente isso.

Fiz alguns teste e para ser sincero não apliquei ainda em produção, como a tag vai se comportar com uma lista de 300 produtos, ainda não sei, mas o recurso promete, veja um exemplo de uso com HTML + PHP:

 

<?php 

if($_POST){
    
    echo  '==>'. $_POST["idestado"];
    
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Teste datalist</title>
        <meta charset="UTF-8">
         <meta name="author" content="PowerInformatica.com.br">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form method="post"    >
        
            <input name="idestado" list="listaestados" >         

            <datalist id="listaestados">
                <select>
                    <option value="12"> Acre</option>
                    <option value="27"> Alagoas </option>
                    <option value="16"> Amapá </option>
                    <option value="13"> Amazonas </option>
                    <option value="29"> Bahia </option>
                    <option value="23"> Ceará </option>
                    <option value="53"> Distrito Federal </option>
                    <option value="32"> Espírito Santo </option>
                    <option value="52"> Goiás </option>
                    <option value="21"> Maranhão </option>
                    <option value="51"> Mato Grosso </option>
                    <option value="50"> Mato Grosso do Sul </option>
                    <option value="31"> Minas Gerais </option>
                    <option value="15"> Pará </option>
                    <option value="25"> Paraíba </option>
                    <option value="41"> Paraná </option>
                    <option value="26"> Pernambuco </option>
                    <option value="22"> Piauí </option>
                    <option value="33"> Rio de Janeiro </option>
                    <option value="24"> Rio Grande do Norte </option>
                    <option value="43"> Rio Grande do Sul </option>
                    <option value="11"> Rondônia </option>
                    <option value="14"> Roraima </option>
                    <option value="42"> Santa Catarina </option>
                    <option value="35"> São Paulo </option>
                    <option value="28"> Sergipe </option>
                    <option value="17"> Tocantins </option>
                </select>
            </datalist>        

        </form>    
        
    </body>
</html>

Faça os teste e veja que interessante os tipos de retorno que esse recurso oferece se o usuário escolher um dos estados, o retorno é o ID do estado, se digitar qualquer coisa no input, e isso é permitido, o retorno é o que foi digitado.

Bom agora é só você usar sua criatividade para agregar mais esse valor aos seus sistemas.

datalist

 

 

Anúncios

Sobre Carlos Susviela

Programador (Desktop / web) WebDeveloper (Sistemas e páginas internet) Técnico Informática http://www.PowerInformatica.com.br --------------------------- Torcedor: S.C. Internacional / RS / Brasil
Esse post foi publicado em Computadores e a Internet, html, Programação, Programação PHP e marcado , , , , , , , , . Guardar link permanente.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s