Utilizando o Autocomplete do jQuery UI com o Ajax no jQuery
Seguir

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Desenvolvimento Web /Utilizando o Autocomplete do jQuery UI com o Ajax no jQuery

Utilizando o Autocomplete do jQuery UI com o Ajax no jQuery

Vinícius Thiengo
(18534) (2)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Curso Android, gratuito
Lendo
TítuloManual de DevOps: como obter agilidade, confiabilidade e segurança em organizações tecnológicas
CategoriaEngenharia de Software
Autor(es)Gene Kim, Jez Humble, John Willis, Patrick Debois
EditoraAlta Books
Edição1ª
Ano2018
Páginas464
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Opa! Blz?

Nesse vídeo apresento uma implementação do widget Autocomplete do jQuery UI utilizando com suporte de busca de opção a interface Ajax do jQuery. Note que não é meu objetivo nesse vídeo abordar todas as opções e configurações possíveis de uso do Autocomplete e nem do Ajax, mas se você sabe apenas o básico de jQuery compreenderá tranquilamente o que mostro e poderá já implementar em seus sistemas Web (se for o caso). Fiqeu atento também que eu não me aprofundo na explicação do que acontece no back-end (lado servidor), pois meu foco mesmo é no lado cliente, pois o lado servidor utilizará a linguagem de sua escolha (PHP, Java, Python, ...), aqui eu utilizei o PHP, o que acontece no back-end pouco importa para o plugin Autocomplete, o que importa mesmo é saber trabalhar a resposta no lado cliente. Mas enfim, vou envitar muitas delongas e deixar você ver o vídeo (que está longo).

Note que ambos os arquivos (index e busca) são .php e não .html, caso contrário a chamada Ajax via atributo "url" teria que ter um valor de acordo com o formato definido para esses arquivos.

Os link para página de demonstração e download do projeto se encontram logo abaixo para donwload.

Página do widget Autocomplete da jQuery UI

Compartilhe, comente! Vlw.

Demo

Página de demonstração
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Download

Download do arquivo .zip com os arquivos do vídeo.

Relacionado

Criando QR Code no PHPCriando QR Code no PHPDesenvolvimento Web
Gráficos Com JavaScript: Apresentando a Highcharts JSGráficos Com JavaScript: Apresentando a Highcharts JSDesenvolvimento Web
IcoMoon APP, Ícones CSS Fáceis e Úteis em Seu SiteIcoMoon APP, Ícones CSS Fáceis e Úteis em Seu SiteDesenvolvimento Web
Logos e Ícones com o EasyIcon.netLogos e Ícones com o EasyIcon.netDesenvolvimento Web
jquery - jquery ui - ajax - autocomplete

Compartilhar

Comentários Facebook

Comentários Blog (2)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
Rafael Taboada (0) (0)
10/05/2021
Funcionou bem para o que eu gostaria, trouxe o conteúdo da resposta para buscar do meu banco de dados em vez de buscar daquele seu Array teste. Porém percebi que o autocomplete só funciona com as primeiras letras e não de qualquer lugar da palavra. É possível essa alteração?
Responder
Vinícius Thiengo (0) (0)
12/05/2021
Rafael, tudo bem? Espero que sim.

Certamente é possível.

Porém vou pedir que você destrinche a documentação oficial do Autocomplete jQuery UI para conseguir essa informação: https://jqueryui.com/autocomplete/

Isso, pois eu já algum tempo não mais trabalho com Web frontend.

O React ou o VueJS podem ter opções ainda melhores que a jQuery UI.

É isso.

Abraço.
Responder