Autocomplete

A funcionalidade do componente 'autocomplete' já está bastante difundida e podemos facilmente encontrá-la em diversos sites. Basicamente, a ideia é sugerir/filtrar informações de uma lista de palavras predefinida, à medida que o usuário digita. Veja seu uso na Figura 4

Para utilizar um componente 'autocomplete' do jQuery, basta criar um campo texto, e por meio da função 'autocomplete' informar à biblioteca jQuery UI que trata-se de um campo 'autocomplete'.

Ex.:

<script>

$(function() {

      var livros = [

            "1822", "Comprometida","Comer, Rezar, Amar", "Agape",

            "Incríveis passatempos matematicos", "Brasil - uma historia",

            "Nosso lar", "O Aleph", "Aforismos"                               

      ];

      $("#livros").autocomplete({

            source: livros

      });

});

</script>

Procurar: <input id="livros" />

• Assim como no Accordion, para construir um componente 'autocomplete' do jQuery UI, basta  utilizar elementos do próprio HTML e um pouco de JavaScript.
• Neste caso específico, utilizamos um campo texto e utilizamos a função 'autocomplete'.
• Existem diversas outras opções/variações de uso desse componente, como, por exemplo, busca de dados direta do servidor, cache das consultas etc. Portanto, à medida que estiver familiarizado com o que foi ensinado, dirija-se ao site do desenvolvedor para aprender as demais possibilidades.