0 Compartilhamentos 50 Views

30 Plugins de jQuery e Ajax para Autocomplete

1 de novembro de 2012

O recurso do autocompletar em campos de formulário ou busca é uma excelente ferramenta para facilitar a vida do usuário. Sugerindo palavras em um campo de input permite que os visitantes encontrem e selecionem rapidamente um determinado valor, agilizando a busca e funcionando como um filtro de conteúdo. Nos dias de hoje, todo mundo quer a velocidade de uma pesquisa instântanea e por esta razão muitos mecanismos de busca o recurso de autocompletar com AJAX.Conheça agora mais de 30 opções que combinam o poder do jQuery e do AJAX para tornar isso possível.

1. AJAX AutoComplete for jQuery

AJAX Autocomplete for jQuery permite que você crie facilmente caixas de autocompletar/autosugestão para campos de entrada de texto. Construído com foco na performance, este plugin armazena em cache os resultados de cada consulta.

Ajax AutoComplete for jQuery

Veja Mais | Demo

 

2. jQuery ComboGrid with Autocomplete Plugin

Um ComboGrid, assim como o autocompletar em jQuery, quando adicionado a um campo de input, permite aos usuários encontrar rapdiamente e selecionar o que deseja de uma lista de valores pré-preenchida, de forma tabular.

jQuery ComboGrid with Autocomplete Plugin

Veja Mais | Demo

 

3. VisualSearch.js

VisualSearch.js aperfeiçoa as caixas de busca com a habilidade de autocompletar com jQuery com resultados prévios. Especifique as iniciais para completar assim como os valores completados para cada busca.

VisualSearch.js – jQuery modern search boxes

Veja Mais | Demo

 

4. Autocomplete jQuery Plugin for Textarea

Com certeza você já viu um recurso de autocompletar funcionando em um campo de input. Mas você talvez não tenha visto este recurso ativado em uma textarea. Até agora…

Autocomplete jQuery Plugin for Textarea

Veja Mais | Demo

 

5. FaceBook Like – jQuery autosuggest Search Engine

Este plugin permite criar um sistema de autosugestão idêntico ao utilizado no Facebook!

FaceBook Like – jQuery autosuggest Search Engine

Veja Mais | Demo

 

6. jQuery Autocomplete plugin

Este script é baseado no jQuery Autocomplete plugin criado pela PengoWorks. Ele possui muitas opções e é bem fácil de se configurar em sua página.

jQuery Autocomplete plugin

Veja Mais | Demo

 

7. Tokeninput

Tokeninput é um plugin de jQuery de autocompletar que permite aos usuários selecionar não apenas um mas múltiplos itens de uma lista pré-definida.

jQuery Tokeninput – Select multiple items from a predefined list

Veja Mais | Demo

 

8. jQuery Autocomplete Country Selector

Geralmente campos de seleção de países ou estados são criados utilizando um drop-down. Mas este plugin em jQuery utiliza o recurso de autocompletar para substituir o antigo campo select.

Redesigning the jQuery Country Selector

Veja Mais | Demo

 

9. Address Picker: Real Time Map Location in jQuery

Address Picker é um plugin em jQuery de autocompletar com funcionalidades de localização e mapa automático. Ele exibe um mapa direto do Google Maps para o endereço selecionado, até mesmo enquanto o usuário navega através das sugestões automáticas.

Address Picker: Display Real Time Map Location in jQuery

Veja Mais | Demo

 

10. bassistance jQuery Autocomplete Plugin

Outra alternativa para permitir que os usuários encontrem rapidamente o que estão procurando, usando o poder das sugestões automáticas.

bassistance jQuery Autocomplete Plugin

Veja Mais | Demo

 

11. jQuery Plugin: Auto Complete

jQuery Autocomplete pega aquilo que o usuário digita e tenta encontrar em uma lista de palavras aquela que corresponda a sua busca. Este plugin se agrega sozinho ao campo de entrada de dados especificado e cria uma lista que desce com as sugestões.

jQuery Plugin: Auto Complete

Veja Mais | Demo

 

12. jQuery Autocomplete Mod

jQuery Autocomplete é um plugin avançado com suporte a array local (pode usar usar com ou sem AJAX). Possui limite para o número de resultados apresentados, reposiciona o menu de sugestões de acordo com a resolução e outras funcionalidades.

jQuery Autocomplete Mod

Veja Mais | Demo

 

13. AutoComplete Field with jQuery, JSON & PHP

Este plugin integra o poder do jQuery do JSON e do PHP para fornecer uma solução robusta de autocompletar.

Auto-Complete Field with jQuery, JSON & PHP

Veja Mais | Demo

 

14. Nodstrum – jQuery Auto Completer

Este plugin de jQuery de autocompletar é uma resposta do autor a todos os outros que são jogados dentro de um zip apenas com instruções de como usar. Aqui, o autor explica como e porque ele funciona, permitindo que o usuário compreenda seus mecanismos e possa fazer ajustes ao seu gosto.

Nodstrum – jQuery Auto Completer

Veja Mais | Demo

 

15. Smart jQuery AutoComplete Plugin

Utilizar o Smart jQuery Autocomplete no seu projeto é muito fácil. Este plugin dá ao administrador a flexibilidade de substituir a função de filtro interna por uma função customizada.

jQuery Smart AutoComplete Plugin

Veja Mais | Demo

 

16. How to Use the jQuery UI Autocomplete Widget

Autocompletar campos de texto é uma funcionalidade popular entre os visitantes porque torna a entrada de dados muito mais fácil. É um recurso que pode ser usado quando se está procurando um produto específico, por exemplo, ou quando o visitante deve digitar o nome de um país ou cidade ou qualquer outro elemento contido em um conjunto limitado de opções.

How to Use the jQuery UI Autocomplete Widget

Veja Mais | Demo

 

17. TextExt

TextExt é um plugin para jQuery criado para oferecer o recurso de autocompletar em um campo de texto. Seu sistema modular permite que você transforme facilmente um input de texto HTML em uma ampla gama de opções de entrada de dados sem sobrecarregar o seu código-fonte e tornar o seu site lento com código que não será utilizado. Instale somente os módulos que forem interessantes para o seu projeto!

jQuery tag input and autocomplete plugin : TextExt

Veja Mais | Demo

 

18. Auto Complete in Your Google Custom Search Engine

Este tutorial irá ensinar como recuperar “Buscas Populares” da sua Google Custom Search Engine (CSE) para utilizá-la em tempo real em um sistema de autocompletar com jQuery.

How to Add Auto Complete to Your Google Custom Search Engine

Veja Mais | Demo

 

19. jQueryUI smartAutocomplete

Este código estende as funcionalidades de um sistema de autocompletar adicionando rolagem infinita ao recuperar dados de uma fonte externa.

jQueryUI smartAutocomplete

Veja Mais | Demo

 

20. JavaScript autocomplete

Este tutorial ilustra uma forma simples de implantar uma solução de autocompletar em Javascript.

JavaScript autocomplete

Veja Mais | Demo

 

21. Easy-To-Use jQuery-AJAX Autosuggest Plugin

Este plugin em jQuery para autosugestão oferece um pacote de funcionalidades extra: permite múltiplas instâncias, aceita parâmetros customizados, controle pelo teclado e outras. Este plugin não é focado em estilo; o arquivo CSS é pequeno e facilmente modificável.

Easy-To-Use jQuery-Ajax Autosuggest Plugin

Veja Mais | Demo

 

22. AJAX Search Suggest with jQuery

Este plugin utiliza PHP para recuperar do servidor os termos de busca mais frequentes através de AJAX. O PHP retorna uma string contendo os resultados.

AJAX Search Suggest

Veja Mais | Demo

 

23. A fancy Apple.com-style jQuery search suggestion

Esta solução emula o efeito de autocompletar do site Apple.com. Para atingir o resultado final, é necessária uma combinação de diferentes ferramentas: MySQL (para o banco de dados), HTML/CSS para exibição, PHP para recuperação de dados e jQuery para a requisição em AJAX.

A fancy Apple.com-style search suggestion

Veja Mais | Demo

 

24. FCBKcomplete – jQuery autocomplete Plugin

Mais uma elegante alternativa para autocompletar com jQuery que simula o estilo utilizado no Facebook.

FCBKcomplete – jQuery autocomplete Plugin

Veja Mais | Demo

 

25. Autosuggest / Autocomplete with jQuery,AJAX,XML,PHP

Este plugin de jQuery para autocompletar recupera os valores de uma lista fornecida por XML (gerado por script a nível de servidor).

Autosuggest / Autocomplete with Ajax,XML,PHP

Veja Mais | Demo

 

26. AJAX Based Multiselect jQuery Autocomplete Control in ASP.Net

Este tutorial irá explicar passo a passo como criar um Control em ASP.NET de multiseleção com autocompletar via AJAX. Neste caso, será utilizado o jQuery UI Autocomplete Control. Para obter os dados usando AJAX, teremos Handlers de ASP clássico.

Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net

Veja Mais | Demo

 

27. AutoSuggest jQuery Plugin

AutoSuggest jQuery é uma versão mais leve para implementar a seleção de múltiplos itens de uma lista, similar ao que o Facebook realiza. O plugin irá dinamicamente criar todo os elementos HTML necessários para funcionar. Você não precisa adicionar nenhum HTML extra para este plugin e nenhuma imagem. Todo o estilo é feito 100% através do CSS, incluído no pacote.

AutoSuggest jQuery Plugin

Veja Mais | Demo

 

28. AJAX-Driven JavaScript ComboBox with Autocomplete

dhtmlxCombo é uma combox em Javascript com autocompletar para vários navegadores. Ele estende a funcionalidade básica de um select e ativa a habilidade de exibir sugestões enquanto o usuário digita no campo de texto. dhtmlxCombo pode ser convertido de instâncias já existentes de um Select em HTML ou gerado com Javascript no carregamento. Com o uso do AJAX, é possível obter a lista de valores dinamicamente de um servidor.

Ajax-Driven JavaScript ComboBox with Autocomplete

Veja Mais | Demo

 

29. WICK Web Input Completion Kit

O Web Input Completion Kit (WICK) é um framework que utiliza padrões web como JavaScript, DOM e CSS para facilitar a entrada textual em formulários com a ajuda de fontes de dados locais ou remotas. Este código foi originalmente desenvolvido para facilitar a funcionalidade de autocompetar em webmails, como o utilizado no Gmail.

 WICK Web Input Completion Kit

Veja Mais | Demo

 

30. jQuery Sexy-Combo : Cool Select Menu, ComboBox with AutoComplete

Sexy Combo é um plugin de jQuery para autocompletar que substitui dropdowns com uma versão customizável e mais prática do que a padrão do navegador. Suporta múltiplas seleções, temas em CSS, filtragem por digitação e diversas outras configurações.

jQuery Sexy-Combo : Cool Select Menu, ComboBox with AutoComplete

Veja Mais | Demo

 

31. Yahoo and Google Suggestions jQuery Search Box

Tutorial de como se conectar ao sistema de sugestões do Yahoo e do Google para autocompletar um campo de texto enquanto o usuário digita.

Yahoo and Google Suggestions Search Box

Veja Mais | Demo

Você pode se interessar

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1
Vídeos
22 visualizações
Vídeos
22 visualizações

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1

Gabriel Fróes - 9 de outubro de 2017

No último vídeo do canal demos algumas dicas sobre como preparar seu currículo para uma vaga de programador mas esquecemos de uma dica super importante que falaremos nesse vídeo.

Confira os principais trailers da New York Comic Con 2017
Notícias
31 visualizações
Notícias
31 visualizações

Confira os principais trailers da New York Comic Con 2017

Carlos L. A. da Silva - 9 de outubro de 2017

Festa dos quadrinhos foi palco de trailers de mega-produções do cinema e séries de TV: Liga da Justiça, The Walking Dead e novo Círculo de Fogo. Confira!

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma
Notícias
9 visualizações
Notícias
9 visualizações

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma

Carlos L. A. da Silva - 9 de outubro de 2017

Segundo o jornal The Washington Post, empresa teria começado sua investigação depois de casos similares no Twitter e no Facebook.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Executivo da Microsoft confirma desinteresse no Windows Phone
Notícias
29 visualizações
29 visualizações

Executivo da Microsoft confirma desinteresse no Windows Phone

Carlos L. A. da Silva - 9 de outubro de 2017
Elon Musk critica Google Clips
Notícias
64 visualizações
64 visualizações

Elon Musk critica Google Clips

Carlos L. A. da Silva - 9 de outubro de 2017
Michel Temer vetou emenda que poderia censurar a internet
Notícias
26 visualizações
26 visualizações

Michel Temer vetou emenda que poderia censurar a internet

Carlos L. A. da Silva - 9 de outubro de 2017