Autocompletion é um padrão com o qual todos os utilizadores da web estão familiarizados. Quando se faz uma pesquisa, o seu motor de busca sugere termos. Quando escreve uma nova mensagem de correio electrónico, o seu cliente de correio sugere destinatários. Esta funcionalidade, contudo, não tem estado disponível para programadores web sem uma quantidade não trivial de JavaScript. Um dos novos elementos HTML5, o , traz esta funcionalidade autocompleta para a Web nativamente. Neste artigo, descreverei o que são os datalistas, quando é apropriado utilizá-los, as suas limitações e o que fazer para os navegadores que não os suportam. Vamos começar.

Antes de começar

Quer criar um datalista para o seu site sem usar HTML5? Use JotForm para construir rapidamente um menu dropdown personalizado – ou mesmo um dropdown dinâmico complexo – sem necessidade de codificação.

Criar datalistas

Para mostrar como funciona um datalista, vamos começar com uma entrada de texto tradicional:

  1. <label for=”favorite_team”> Equipa Favorita:</label>
  2. <input type=”text” name=”team” id=”favorite_team”>

Este campo pede a um utilizador para fornecer a sua equipa desportiva favorita. Por defeito, o utilizador não receberá ajuda adicional para completar o campo. Mas ao utilizar um datalist, pode fornecer uma lista de opções que o utilizador pode seleccionar para completar o campo. Para o fazer, definir uma lista de dados com um elemento de opção para cada sugestão:

  1. <datalista>
  2. <opção>Detroit Lions</opção>
  3. <opção>Detroit Pistons</opção>
  4. <opção> Asas Vermelhas de Detroit</opção>
  5. <opção>Detroit Tigers</opção>
  6. <!- etc…. ->
  7. </datalista>

Para ligar um elemento de entrada a um elemento de entrada, dar ao elemento de entrada um atributo de lista e ao elemento de entrada um atributo de id que corresponda. Aqui está um exemplo:

  1. <label for=”favorite_team”>Favorite Team:</label>
  2. <input type=”text” name=”team” id=”favorite_team” list=”team_list”>
  3. <datalista id=”team_list”>
  4. <opção>Detroit Lions</opção>
  5. <opção>Detroit Pistons</opção>
  6. <opção> Asas Vermelhas de Detroit</opção>
  7. <opção>Detroit Tigers</opção>
  8. <!- etc… ->
  9. </datalista>

Nota que o atributo lista do input e o atributo id do datalista contêm o mesmo valor, “team_list”. Isto fornece a ligação entre os dois.

É isso mesmo. Não é necessário JavaScript para fazer um datalist funcionar. A figura 1 mostra o que o utilizador verá nos navegadores de suporte após digitar um D.

Datalista de visualizaçãobr>Figure 1. Exibição Datalista (canto superior esquerdo: Internet Explorer 10; em cima à direita: Firefox 18; em baixo à esquerda: Cromo 24; em baixo à direita: Opera 12)

Nota: Internet Explorer 10 e Opera não requerem que o utilizador escreva um caracter antes de ver sugestões, enquanto que Firefox e Chrome do.

Os elementos de opção também podem ter um atributo de valor. Isto é útil quando um utilizador pode não conhecer o código associado a uma dada opção. Considere os seguintes E.U.A. state input:

  1. <label for=”state”>State:</label>
  2. <input type=”text” name=”state” id=”state” list=”state_list”>
  3. <datalista id=”state_list”>
  4. < valor da opção=”AL”>Alabama</opção>
  5. <opção valor=”AK”>Alaska</opção>
  6. < valor da opção=”AZ”>Arizona</opção>
  7. < valor da opção=”AR”>Arkansas</opção>
  8. <!- etc ->
  9. </datalista>

Aqui, o utilizador verá uma lista de nomes completos do estado, mas quando o utilizador fizer uma selecção, o texto introduzido será preenchido com o código do estado e não com o nome completo. Um exemplo é mostrado na Figura 2.

Selecção de uma Opção Datalist com um Valor Correspondentebr>Figure 2. Selecção de uma Opção Datalist com um Valor Correspondente (Firefox 18)

O Atributo Auto-Completar

Se os datalistas da Figura 1 e da Figura 2 parecem familiares, é porque os browsers tiveram o auto-completar implementado durante muito tempo. Todos os browsers têm algum mecanismo de armazenamento das entradas de um utilizador para serem utilizadas para o auto-completar mais tarde.

Os autores podem utilizar o atributo auto-completar para controlar se o browser deve tentar completar automaticamente os dados do utilizador. Os valores possíveis são mostrados no seguinte exemplo:

  1. <form>>
  2. <!-
  3. Se o atributo autocompletar não for especificado, herda o valor
  4. do seu elemento de forma pai. Se não for especificado, o valor por defeito do atributo autocompletar do formulário
  5. está “ligado”. Uma vez que nem este input nem o seu
  6. form têm o atributo especificado, será utilizado o estado “on”.
  7. ->
  8. <input type=”text” name=”firstName”>
  9. <!-
  10. O estado “on” indica que o navegador pode lembrar o valor para o futuro
  11. utilizar, bem como sugerir valores previamente armazenados.
  12. ->
  13. <input type=”text” name=”address” autocomplete=”on”>
  14. <!-
  15. O estado “off” diz ao navegador para não guardar o valor introduzido para
  16. esta entrada nem para sugerir valores introduzidos anteriormente. Isto deve ser
  17. usado se os dados forem sensíveis ou se o valor nunca será reutilizado.
  18. ->
  19. <input type=”text” name=”secret” autocomplete=”off”>
  20. </form>

Então qual é a diferença entre o atributo autocompletar e os datalistas? O atributo autocompletar diz ao navegador se deve dar a um utilizador opções de conclusão baseadas em entradas anteriores e se deve armazenar o valor introduzido para conclusão futura. As listas de dados são listas de sugestões fornecidas pelo autor que são sempre exibidas independentemente da entrada anterior.

Uma advertência é que a definição do atributo autocompletar para “off” impede que as listas de dados sejam exibidas no Opera. Aqui está um exemplo:

  1. <!-
  2. Este datalista nunca será exibido no Opera porque o atributo autocompletar
  3. está definido para “off”. Será exibido em todos os outros navegadores de suporte.
  4. ->
  5. <input type=”text” list=”pets” autocomplete=”off”>
  6. <datalista id=”animais de estimação”>
  7. <opção>Cat</opção>
  8. <opção>Dog</opção>
  9. <opção>Hamster</opção>
  10. <opção>Tartaruga</opção>
  11. </datalista>

Outros Tipos de Entrada

Enquanto o auto-completamento é tradicionalmente associado à entrada textual, Os datalistas também podem ser utilizados em alguns dos novos tipos de entrada HTML5. Considere o tipo de entrada de gama, que permite a criação de um elemento de formulário deslizante. Ao combinar isto com um datalist, pode sugerir pontos na gama ao utilizador.

Por exemplo, a entrada seguinte pede ao utilizador para fornecer uma doação entre $5 e $200 dólares.

  1. <label for=”donation”>Donation Amount (USD):</label>
  2. <input type=”range” name=”donation” id=”donation” list=”donation_list”
  3. step=”5″ min=”5″ max=”200″>
  4. <datalista id=”donation_list”>
  5. <opção></opção>
  6. <opção></opção>
  7. <opção></opção>
  8. <opção></option>
  9. </datalist>

Figure 3 e a Figura 4 mostram a visualização de uma entrada de gama no Chrome 24 e no Internet Explorer 10, respectivamente.

Entrada de gama com Datalistbr>Figure 3. Entrada de gama com Datalist (Cromo 24)

Entrada de gama com Datalistbr>Figure 4. Entrada de gama com Datalist (Internet Explorer 10)

P>Pode ver-se que cada browser exibe uma marca de selecção para cada opção datalist fornecida. Além disso, o Chrome irá encaixar o selector nestes valores pré-definidos à medida que o utilizador se aproxima do selector.

Felizmente, o Internet Explorer e o Chrome são os únicos navegadores que suportam a entrada de dados com lista de gama de valores neste momento. A Figura 5 mostra o suporte de listas de dados em tipos de entrada comuns em navegadores modernos.

Suporte de navegadores de listas de dados em tipos de entrada de formuláriobr>Figure 5. Suporte de Navegadores de Datalistas em Tipos de Entrada de Formulários

Quando se usa um Datalista

Os datalistas não têm um mecanismo incorporado para exigir que um utilizador seleccione uma opção fornecida, são bem adequados para entradas que podem aceitar qualquer valor. O exemplo anterior de fornecer uma equipa desportiva enquadra-se aqui. Enquanto a datalista sugeria equipas, o utilizador era livre de introduzir qualquer valor.

Conversamente, o exemplo do estado americano falha neste teste porque existe um conjunto limitado de valores válidos que o utilizador deve fornecer. Este caso de utilização é melhor tratado pelo elemento seleccionado porque obriga a uma selecção.

Uma excepção a isto são as entradas com um grande número de selecções válidas. Por exemplo, considere a tradicional lista pendente de países mostrada na Figura 6.

Drop-Down Country Drop-Downbr>Figure 6. Lista pendente padrão do país

Esta lista impede os utilizadores ao forçá-los a procurar através de centenas de opções para encontrar a que estão à procura. Uma funcionalidade autocompleta encaixa bem neste caso de utilização porque um utilizador pode filtrar rapidamente a lista digitando um ou dois caracteres.

Aqui está como a selecção do país pode ser implementada com um datalist:

  1. <label for=”country”>Country:</label>
  2. <input type=”text” id=”country” list=”country_list”>
  3. <datalista id=”country_list”>
  4. < valor da opção=”AF”>Afeganistão</opção>
  5. <opção value=”AX”> ilhasÅland</opção>
  6. < valor da opção=”AL”>Albânia</opção>
  7. < valor da opção=”DZ”>Algeria</opção>
  8. <!- more ->
  9. </datalista>

Figure 7 mostra o que o utilizador vai ver depois de digitar um U.

Uma Abordagem Datalista ao Campo do Formulário do Paísbr>Figure 7. A Datalist Approach to the Country Form Field

Enforcing a Value

Embora os datalists não lhe permitam nativamente exigir que uma opção seja seleccionada, pode facilmente adicionar uma validação que o faça. Por exemplo, o seguinte código faz uso da API de validação de restrição HTML5 para adicionar tal validação:

  1. // Encontrar todas as entradas no DOM que estão ligadas a um datalist através do atributo da sua lista.
  2. entradas de validação HTML5 = document.querySelectorAll(‘input’);
  3. for (var i = 0; i < entradas.length; i++) {
  4. // Quando o valor do input muda…
  5. inputs.addEventListener(‘change’, function() {
  6. var optionFound = false,
  7. datalist = this.list;
  9. // Determinar se existe uma opção com o valor actual do input.
  10. para (var j = 0; j < datalist.options.length; j++) {
  11. if (this.value === datalist.options.valor) {
  12. optionFound = true;
  13. break;
  14. }
  15. }/li>
  16. // use a função setCustomValidity do API de validação
  17. // para fornecer um feedback do utilizador se o valor não existir no datalist
  18. if (optionFound) {
  19. isto.setCustomValidity(“);
  21. } else {
  22. this.setCustomValidity(‘Por favor seleccione um valor válido.’);
  23. }
  24. });
  26. /li>

A API de validação de restrições é implementada em todos os browsers que suportam datalists, por isso, se o datalist funcionar, a validação deve funcionar também. Agora, quando o utilizador tenta submeter um formulário com uma entrada que tem um datalist (e não seleccionou uma opção), verá o erro mostrado na Figura 8.

Constraint Validation API Errorbr>Figure 8. Erro da API de Validação de Restrição (Internet Explorer 10)

É importante notar que a API de validação de restrição não elimina a necessidade de validação do lado do servidor. Os utilizadores que trabalham com browsers mais antigos não terão disponível a API de validação de restrição, e os utilizadores maliciosos podem facilmente subverter scripts do lado do cliente.

Embora esta abordagem funcione em browsers modernos, apresenta uma IU inutilizável aos utilizadores que executam browsers que não têm suporte. Os utilizadores são informados de que devem seleccionar um valor válido, mas se o seu navegador não suportar datalists, não podem ver as opções. Portanto, se planeia utilizar esta abordagem, é essencial fornecer uma IU que funcione em todos os browsers. Isto pode ser conseguido detectando se o browser suporta datalists e depois polifilling apropriadamente.

Navegadores sem suporte

Na altura desta escrita, os datalists para entradas de texto são suportados no Internet Explorer 10, Firefox 4+, Chrome 20+, e Opera, o que infelizmente deixa de fora um grande número de utilizadores.

Não é semelhante com muitas novas características HTML5, para a maioria dos casos de uso, não é necessário fazer trabalho extra em browsers que não suportam datalists. Por defeito, a lista de opções que fornece são meramente sugestões; portanto, os utilizadores com browsers que não têm suporte precisarão simplesmente de preencher o campo de texto sem quaisquer sugestões.

No entanto, algumas opções de recurso podem ser usadas para fornecer uma experiência mais completa aos utilizadores que executam browsers sem suporte.

Fallback to Alternate HTML Content

Uma opção, popularizada por Jeremy Keith, é aproveitar o facto de que os browsers que não suportam o elemento datalista continuarão a exibir elementos filhos para o utilizador. O seguinte mostra como o exemplo de datalista de país pode ser alterado e voltar a usar <select>:

ol>

  • <label for=”country”>Country:</label>
  • <datalista id=”country_list”>
  • <select name=”country”>
  • < valor da opção=”AF”>Afeganistão</opção>
  • < valor da opção=”AX”> ilhasÅland</opção>
  • < valor da opção=”AL”>Albânia</opção>
  • < valor da opção=”DZ”>Algeria</opção>
  • < valor da opção=”AS”>American Samoa</opção>
  • <!- more ->
  • </select>
  • Se outro, por favor especifique:
  • </datalista>
  • <input type=”text” name=”country” id=”country” list=”country_list”>

    • A IU apresentada aos utilizadores em navegadores que suportam listas de dados não será alterada, mas os utilizadores que trabalham com browsers sem suporte vêem agora um elemento seleccionado com as opções do país e uma caixa de texto que podem utilizar para introduzir qualquer valor. Isto é mostrado na Figura 9.

    A Select Fallback for Datalistsbr>Figure 9: A Select Fallback for Datalists (Internet Explorer 9)

    Polyfilling

    Uma característica que o fallback seleccionado não fornece é o comportamento autocompleto que os datalistas oferecem nativamente. Se isso for importante para as listas de dados que está a adicionar, uma segunda opção de recurso é polifilhar uma implementação datalista.

    Para começar, é preciso primeiro determinar se o navegador do utilizador suporta listas de dados. A popular biblioteca de detecção de características Modernizr fornece tal teste, como mostrado aqui:

    1. if (Modernizr.input.list) {
    2. // O navegador suporta o atributo da lista e as listas de dados.
    3. } else {
    4. //O navegador não suporta nem o atributo da lista nem as listas de dados.
    5. }
    6. /li>
    7. }/li>

    Utilizando esta abordagem, pode agora polifilar uma implementação datalista para utilizadores em navegadores sem suporte. Enquanto vários polifill estão disponíveis para os datalistas, prefiro utilizar o widget jQuery UI autocomplete. O seguinte código mostra uma implementação polyfill:

    1. var datalist,
    2. listAttribute,
    3. options = ;
    4. // Se o browser não suportar o atributo list…
    5. se (!Modernizr.input.list) {
    6. // Para cada entrada de texto com um atributo de lista…
    7. $(‘input’).each(function() {
    9. // Encontre o id do datalist no input
    10. // Usando isto, encontre o datalist que corresponde ao input.
    11. listAttribute = $(this).attr(‘list’);
    12. datalist = $(‘#’ + listAttribute);
    13. // Se a entrada tiver um elemento datalist correspondente…
    14. if (datalist.comprimento > 0) {
    15. opções = ;
    16. // Construir a lista de opções para passar ao widget autocompletar.
    17. datalist.find(‘opção’).each(function() {
    18. options.push({ label: this.innerHTML, value: this.value });
    19. });
    20. // Transforme a entrada num widget jQuery UI autocomplete.
    21. $(this).autocomplete({ fonte: opções });
    22. }
    23. });
    24. // Remove todos os datalists do DOM para que não exibam.
    25. $(‘datalist’).remove();
    27. }

    Figure 10 mostra a exibição do exemplo da lista de países no Safari com o polifiltro jQuery UI autocompleto.

    País Polifiltro de Datalist Usando o polifiltro jQuery UI autocompleto's Autocomplete Widgetbr>Figure 10. País Datalist Polyfilled Using jQuery UI’s Autocomplete Widget(Safari)

    P>Pode ter notado que, por defeito, o widget autocompleto da jQuery UI corresponde a caracteres em qualquer parte das opções, enquanto os datalists correspondem apenas às opções no início da string. Ao contrário do datalist nativo, o widget autocompletar permite-lhe personalizar isto para corresponder às opções que desejar.

    O exemplo seguinte mostra como se pode construir uma funcionalidade autocompletar que corresponda às opções apenas no início da cadeia de caracteres:

    1. <input type=”text” id=”autocomplete”>
    2. <script>
    3. opções de var = ;
    4. $(‘#autocompleto’).autocomplete({
    6. // req conterá um objecto com uma propriedade “termo” que contém o valor
    7. // actualmente na entrada de texto. respostaFn deve ser invocada com as opções
    8. // para mostrar ao utilizador.
    9. fonte: function (req, responseFn) {
    10. // Escape any RegExp meaningful characters such as “.”, or “^” from the
    11. // keyed term.
    12. var term = $.ui.autocomplete.escapeRegex(req.term),
    13. // ‘^’ é o caracter RegExp a corresponder no início da string.
    14. // ‘i’ diz ao RegExp para fazer uma correspondência insensível a maiúsculas e minúsculas.
    15. matcher = novo RegExp(‘^’ + termo, ‘i’),
    16. // Loop sobre as opções e selecciona apenas as que correspondem ao RegExp.
    17. matcher = $.grep(opções, função (item) {
    18. return matcher.test(item);
    19. });
    20. // Devolver as opções correspondentes.
    21. responseFn(matches);
    22. }
    23. });
    25. </script>

    Versões mais antigas do Internet Explorer

    Para fazer funcionar qualquer polifill do elemento datalista em versões mais antigas do Internet Explorer, é necessário dar dois passos extra.

    Option Elements

    A primeira é que a versão 9 e anteriores do Internet Explorer requerem que os elementos da opção sejam filhos imediatos de elementos seleccionados. Se não forem, estas versões não os reconhecem, e não serão visíveis para o polifill.

    Felizmente, isto é fácil de contornar. Ao utilizar comentários condicionais, pode colocar um elemento seleccionado em torno das opções apenas para estas versões do Internet Explorer. Consulte este exemplo:

    1. <datalista>
    2. <><select><<>
    3. <opção>Apple</opção>
    4. <opção>Banana</opção>
    5. <opção>Cherry</opção>
    6. <!- etc ->
    7. <><select><<>
    8. </datalista>

    Internet Explorer versão 9 e anterior irá agora detectar as opções adequadamente. O Internet Explorer 10 não será afectado, uma vez que os comentários condicionais foram removidos do analisador no Internet Explorer 10. Todos os outros navegadores também ignorarão os comentários.

    HTML5 Shiv

    Na versão 8 e anterior do Internet Explorer, elementos desconhecidos não podem conter crianças. Portanto, mesmo que os elementos de opção de um datalista estejam dentro de elementos seleccionados, eles ainda não serão reconhecidos.

    Felizmente, também há uma solução fácil para esta questão. A popular biblioteca HTML5 Shiv permite que elementos desconhecidos do Internet Explorer 6-8 tenham filhos. Este shiv está incluído por defeito no Modernizr; basta ter a certeza que a caixa de verificação “html5shiv” está seleccionada quando configura o seu download.

    Limitações dos Datalists

    P>Os datalists são perfeitos para adicionar sugestões a entradas de texto, mas sofrem da falta de capacidades de personalização que muitas aplicações Web modernas requerem. Por exemplo, não se pode fazer o seguinte com as listas de dados:

    • Utilizar CSS para alterar a sua exibição ou a exibição das suas opções.
    • Controlar o posicionamento da lista.
    • Controlar o número de caracteres digitados antes de o navegador exibir os resultados ao utilizador.
    • Controla o que é considerado uma correspondência (sensibilidade ao caso, correspondência no início da string versus em qualquer lugar, e assim por diante).
    • Anexa a entrada a uma fonte de dados do lado do servidor.

    Isto significa que se precisar de alguma desta funcionalidade, terá de procurar uma solução mais robusta de autocompletar. O widget jQuery UI autocomplete fornece a capacidade de fazer tudo isto e muito mais. O widget autocompletar também suporta todos os navegadores de volta ao Internet Explorer 7 sem a necessidade de um polifill. Para mais informações sobre o widget autocompletar, consulte as suas demonstrações e a documentação API. (O widget autocompletar trata apenas de entradas baseadas em texto, pelo que não o poderá ajudar em alguns dos tipos de entrada mais especializados como gama e cor.)

    Embrulhar para cima

    Datalistas fornecem um meio rápido e nativo de exibir sugestões de entrada ao utilizador. Uma vez que as opções são meras sugestões, para muitas situações não é necessário fornecer um fallback para navegadores sem suporte; os utilizadores destes navegadores simplesmente não verão as sugestões.

    Para situações em que se pretende fornecer um datalist funcional a todos os utilizadores, é possível detectar suporte e polifilhar a funcionalidade para navegadores que não têm suporte.

    Embora os datalists sejam óptimos para oferecer sugestões, são limitados na funcionalidade que fornecem. Se precisar de uma solução autocompleta mais robusta, o widget autocompletar da jQuery UI é um bom local para começar.

    By: adminPosted on

    Deixe uma resposta

    O seu endereço de email não será publicado. Campos obrigatórios marcados com *