Entendendo de Vez o Auto-Complete com Jquery e MySql

Neste Post, falaremos sobre uma forma de implementar o auto-complete da biblioteca Jquery -UI com  MySql.

O que é Jquery ?

É uma biblioteca de Códigos pré programados em javascript , que facilita  o desenvolvimento e obtém   recursos  mais ágeis , com  isso  , o  código  fica mais dinâmico  e com  menos linhas  de escrita .

O que é Jquery-UI ?

É uma biblioteca assim  como  o  Jquery  de códigos em Javascript  que com   o  apoio da Biblioteca jquery proporciona  recursos inovadores e dinâmicos .

Hoje falaremos da Função   Auto-Complete  da biblioteca  Jquery-UI.

Para quem está buscando  uma solução  rápida  e profissional  para sua aplicação, falaremos sobre um dos recursos mais utilizados da biblioteca Jquery -UI.

Quantas vezes você se deparou  em uma situação, onde precisava fazer um auto-complete em sua aplicação  com  dados vindo  do  banco? Hoje  vamos mostrar como desenvolver essa aplicação  para obter o  retorno necessário.

Primeira coisa a ser feita é a inclusão  da mesma em seu  código, juntamente com a Biblioteca Jquery.

Obs: É de extrema importância que não esqueça o  Jquery , pois a biblioteca UI por si só, não  terá o  resultado  esperado.

Logo  após desenvolvemos a função  que irá receber  o  auto-complete.

Veja  que o  ID tags será responsável  por receber  o  auto-complete vindo  da variáve.

O que é Variável ?

Tudo o  que varia , ou seja , tudo  que pode ter o seu  valor inicial alterado  .

Ex:

var  a = 1;   -> *  Variável  recebendo  valor um

var b = 2;    -> *  Variável  recebendo  valor dois

a = a+b;

veja que o valor da variável  a  se modifica , por esse motivo  são  chamados de variáveis

Por sua vez a variável “ availableTags”, receberá toda a lista de dados vindo  do  banco.

Agora , para que possamos armazenar os dados  na variável do  javascript , teremos que criar uma query , para  conexão  com  o  banco  de dados .

O que é query ?

Query  deriva de SQL , que  significa  Consulta ;

Nesse artigo, utilizaremos a linguagem  de programação PHP. Poderia ser, ASP, Java, mas utilizaremos PHP para um melhor entendimento.

É muito  importante , entender que nossa query ( Consulta ) , retornará um Array ou seja um vetor, e através  da posição desse vetor que iremos manipular as informações que serão  exibidas.

Definimos o Vetor e sua posição  dentro de um laço  de repetição WHILE, para que o mesmo possa listar e armazenar todas as informações daquela posição do  vetor.

Obs: Existem  outros métodos , no entanto  esse é o que mais aconselho, devido ao  melhor desempenho e performance , pois dessa forma, armazenamos todas as informações em um vetor, e a hora que quiser posso resgatá-lo sem a necessidade de consuta ao  banco   ou  de recarregamento de página.

Depois de criar a estrutura  de recebimento  do  array , vamos precisar de uma ajuda , do  nosso  amigo  JSON.

Através do  JSON , vamos manipular os dados e transformá-lo em uma variável , para que a biblioteca possa listar os dados vindo  do  banco.

Para finalizar nossa aplicação, transformamos a variável  php em  variável javascript , pois somente dessa forma a biblioteca poderá ler os dados .

Você também pode  adicionar o  JSON  direto  no Javascript.

Código  Completo.

Espero que este artigo ajude a entender um pouco  mais sobre os recursos da biblioteca Jquery-UI e como aplicar o  Javascript com  PHP.

Tarcísio Silva

Full Stack developer  , Criativo  e gosta de novas tecnologias e criar melhorias no mundo Web.

Desenvoolvedor Front-End( Javascript, Jquery, Prototype, Angular, CSS , SASS , LESS )

Desenvolvedor Back-End ( PHP, C#, Java, ASP, Ruby , VB)

@tarcisio_s_a

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *