Preenchimento automático com jQuery UI

Existem muitos plug-ins na Internet que nos permitem adicionar esta funcionalidade ao nosso site, no entanto, eles são desenvolvidos sob um esquema de programação que talvez não tenhamos conhecimento e, portanto, sua modificação e implementação geralmente são um tanto tediosas e complicadas. Mas nem tudo está perdido desde jQuery e sua extensão de bibliotecas jQuery UI eles nos trazem alguns métodos para implementar a funcionalidade de preenchimento automático em nosso site sem muita dor de cabeça.
Antes de passar por um exemplo, vamos ver o método de preenchimento automático e como ele funciona.
O método autocomplete ()
O método autocompletar pode ser usado de duas maneiras:

$ (seletor, contexto) .autocomplete (opções) $ (seletor, contexto) .autocomplete ("ação", parâmetros)

Este método declara que um HTML deve ser gerenciado como um campo que exibe uma lista de sugestões, as opções especificam o comportamento desta lista no momento em que o usuário começa a digitar no campo.
Dos caracteres inseridos no campo de texto, é feita uma comparação com os valores contidos nas opções da fonte.
Vamos ver um exemplo prático para ver melhor:
1- Primeiro, incluímos os arquivos necessários:

2- Criamos uma variável que contém as palavras que serão a lista de sugestões disponíveis para autocompletar, a lista de sugestões também pode ser alimentada a partir de um JSON e até mesmo de um XML, até estendendo um pouco a funcionalidade adicionando ajax, mas neste exemplo usaremos uma variável para não complicar as coisas:

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "Javascript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

3- Nós invocamos o método, associamos o seletor a ele e damos a ele o parâmetro como uma opção fonte Dizendo onde obter a lista de sugestões:

 $ ("#tags") .autocomplete ({source: availableTags}); 

4- Para terminar em nosso HTML, criamos umque conterá nossa entrada que implementará o autocomplete:

Tag:

Após a implementação, deve ser algo assim:

Por fim, deixarei para vocês o código completo para que possam testá-lo por si mesmo, sem esquecer que podemos preencher nossa lista de sugestões de várias fontes válidas e aplicando diferentes opções e eventos que irão aumentar a funcionalidade de nosso componente.

 jQuery UI Autocomplete - funcionalidade padrãoTag:

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo