Utilizando o Autocomplete do jQuery UI com o Ajax no jQuery

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
(14411) (2)
Go-ahead
"Não ter um objetivo claro, leva à morte por vários compromissos."
Mark Pincus
Kotlin Android
Capa do livro Mapas Android de Alta Qualidade - Masterização Android
TítuloMapas Android de Alta Qualidade - Masterização Android
CategoriasAndroid, Kotlin, Masterização, Especialização
AutorVinícius Thiengo
Edição
Ano2020
Capítulos11
Páginas166
Acessar Livro
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
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.

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

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

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