idealMind » javascript

JQuery autocomplete em ajax com php e mysql

Wellington Ribeiro — Sat, 31 Oct 2009 05:42:54 +0000

Olá!

Pessoal, desenvolvi um novo sistema de auto complete, na forma de um plugin JQuery, o Simple AutoComplete JQuery Plugin.

O Simple AutoComplete JQuery Plugin é mais fácil de integrar e resolve os BUGs que aconteciam no IE, na funcionalidade deste tutorial.

Você pode baixá-lo e ver a documentação em : http://blog.idealmind.com.br/projetos/simple-autocomplete-jquery-plugin/

Neste tutorial vou mostrar para você como fazer um autocomplete usando JQuery e AJAX, estilizado com css, e consultando banco de dados MySQL com PHP.

O resultado final será como a imagem abaixo:

Antes de tudo, baixe os arquivo necessários: http://blog.idealmind.com.br/exemplos/autocomplete/autocomplete.rar

Lá você encontra os arquivos javascript e css, e também o php, uma página de exemplo e as sqls.

Bom, depois de baixado, vamos ao primeiro passo, que será criar uma tabela no banco de dados, e inserir alguns dados.

Quero deixar um agradecimento e os créditos para o pessoal do webartz (http://www.webartz.com.br/mysql/banco-mysql-de-cidades-e-estados-do-brasil/), pois foi onde encontrei e baixei as sqls com os dados das cidades e estados do brasil.

Vamos criar uma tabela para o nosso exemplo, com os estados do Brasil:

CREATE TABLE `estados` (
	`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
	`sigla` VARCHAR(2) NOT NULL,
	`estado` VARCHAR(45) NOT NULL,
	PRIMARY KEY (`id`),
	INDEX `ix_estado`(`estado`)
)
ENGINE = MyISAM
CHARACTER SET utf8 COLLATE utf8_general_ci;

E agora vamos inserir os estados na tabela:

INSERT INTO `estados` (id, sigla, estado ) VALUES
	(1, 'AC', 'Acre'),
	(2, 'AL', 'Alagoas'),
	(3, 'AM', 'Amazonas'),
	(4, 'AP', 'Amapá'),
	(5, 'BA', 'Bahia'),
	(6, 'CE', 'Ceará'),
	(7, 'DF', 'Distrito Federal'),
	(8, 'ES', 'Espírito Santo'),
	(9, 'GO', 'Goiás'),
	(10, 'MA', 'Maranhão'),
	(11, 'MG', 'Minas Gerais'),
	(12, 'MS', 'Mato Grosso do Sul'),
	(13, 'MT', 'Mato Grosso'),
	(14, 'PA', 'Pará'),
	(15, 'PB', 'Paraíba'),
	(16, 'PE', 'Pernambuco'),
	(17, 'PI', 'Piauí'),
	(18, 'PR', 'Paraná'),
	(19, 'RJ', 'Rio de Janeiro'),
	(20, 'RN', 'Rio Grande do Norte'),
	(21, 'RO', 'Rondônia'),
	(22, 'RR', 'Roraima'),
	(23, 'RS', 'Rio Grande do Sul'),
	(24, 'SC', 'Santa Catarina'),
	(25, 'SE', 'Sergipe'),
	(26, 'SP', 'São Paulo'),
	(27, 'TO', 'Tocantins')
;

Agora vamos criar um arquivo HTML vazio:

Agora, dentro da tag vamos incluir os arquivos necessários:

Quero deixar claro que o arquivo autocomplete.js deve ser chamado antes da JQuery, por questões de compatibilidade.

Feito isso, vamos criar, dentro da tag o campo input onde será digitado o texto e aparecerá o autocomplete:

Observe os valores dos atributos name e id: campo_estado. Estes valores serão a referência para a JQuery.

E agora vamos criar 3 campos, anda dentro da tag , onde armazenaremos os dados referentes a opção que for selecionada no autocomplete:

Observe que foi criado um campo para cada resultado da consulta que o autocomplete vai fazer via AJAX, PHP e MySQL.

Ok. Agora vamos para a parte do javascript, que fará tudo funcionar. O seguinte código deve ser inserido entre as tags , depois da chamada dos arquivos js e css que foram incluídos.

Agora vamos criar o arquivo ajax.php, que receberá por GET o parâmetro q com o valor do texto que foi digitado no campo:

 0 order by locate('$q',estado) limit 10";

// Abaixo executo a sql e atribuo o resultado da consulta à variável $res
$res = mysql_query( $sql );

// Para cada resultado encontrado, será gerada uma linha no autocomplete, colocando em negrito o termo digitado.
while( $campo = mysql_fetch_array( $res ) )
{
	$id = $campo['id'];
	$estado = $campo['estado'];
	$sigla = $campo['sigla'];
	$estado = addslashes($estado);
	$html = preg_replace("/(" . $q . ")/i", "\$1", $estado);

	// Veja que existe o atributo de evento onselect, que executará as funções de retorno no autocomplete
	echo "$html ($sigla)\n";
}
?>

Bom, seguindo esses passos, você poderá incluir uma funcionalidade de autocomplete poderosa em seu site. Agora basta personalizar e estilizar ao seu gosto!

Deixe seu comentário!

Posts Relacionados:

foreach e in_array em javascript

Wellington Ribeiro — Thu, 29 Oct 2009 01:24:46 +0000

Olá!

Hoje vou mostrar para você como fazer para dar um comando equivalente do foreach e in_array do php, só que em javascript.

O foreach serve para percorrer cada chave de um vetor e pegar o valor correspondente. O in_array serve para saber se um determinado valor está dentro de um vetor.

Segue abaixo um exemplo do foreach:

O exemplo acima vai imprimir

A chave 0 tem a fruta maçã
A chave 1 tem a fruta banana
A chave 2 tem a fruta pêra
A chave 3 tem a fruta goiaba

Agora um exemplo de como fazer um in_array em javascript:

// Abaixo crio a função in_array
function in_array(valor,vetor)
{
	for(var i in vetor)
	{
		if(valor == vetor[i])
		{
			return i;
		}
	}
	return false;
}
// Um exemplo de uso: quero saber se banana está no vetor
var chave = in_array("banana",fruta);
if(chave)
{
	document.write("banana está na cesta e a chave é "+chave+"
");
}
else
{
	document.write("banana não está na cesta
");
}
// Outro exemplo de uso: quero saber se morango está no vetor
var chave = in_array("morango",fruta);
if(chave)
{
 document.write("morango está na cesta e a chave é "+chave+"
");
}
else
{
 document.write("morango não está na cesta
");
}

O código acima vai imprimir

banana está na cesta e a chave é 1
morango não está na cesta

Essas funções são bem úteis e dá para fazer um monte de coisas!

Deixe um comentário!

Posts Relacionados:

Como passar parâmetros do flash para o javascript e do javascript para o flash

Wellington Ribeiro — Sun, 18 Oct 2009 19:38:18 +0000

Olá!

Na última sexta, descobri, em conjunto com um dos membros do Tech Team do meuInglês, Eduardo, um método muito interessante de se passar parâmetros do flash para uma função javascript e recuperar o valor retornado pela função para utilizar no flash.

A idéia inicial era fazer o flash executar uma função javascript que por sua vez iria fazer uma requisição AJAX utilizando JQuery, e retornar o valor da consulta para o flash.

Para ser sincero, fui infeliz nesse processo, mas ainda não tive tempo de pesquisar mais a fundo por uma forma de contornar o problema que aconteceu: a função retornava valor sempre falso, pois o AJAX ainda não havia retornado uma resposta antes do final da execução da função.

Mas, de qualquer forma, essa funcionalidade se mostrou muito importante, pois é possível controlar elementos HTML através do flash e, por sua vez, executar alguma ação no flash de acordo com o retorno da função javascript.

Vamos ao que interessa então! Vamos usar uma exemplo prático para ilustrar.

Vamos supor que você tenha um botão em seu flash. A pressionar o botão, você quer inserir/modificar um texto dentro de uma div, sendo que o texto foi escrito dentro de um campo de texto no flash.

O script do botão fica da seguinte forma:

// A linha abaixo é para carregar a biblioteca do flash que possui a função ExternalInterface.call, que fará a mágica
import flash.external.*;

// Declaro a variável 'resultado' como uma string
var resultado:Boolean;

// Defino a função que será executada quando o botão (instanciado como 'meuBotao')
meuBotao.onPress = function() {

  // Possuímos um campo de texto dinâmico instanciado como 'campoTexto', e atribuimos o valor dele à variável 'texto'
  var texto = campoTexto.text;
  // Possuímos no flash um campo de texto também, instanciado como 'campoNome', onde pegamos o nome do usuário e atribuímos o valor ditado nele à variável 'nome'
  var nome = campoNome.text;

  // Abaixo passamos os parâmetros 'nome' e 'texto' para a função javascript recebeDados(),
  // e atríbuímos a resposta da função à variável 'resultado'
  // Perceba que a função javascript deve retornar um valor booleano (true ou false, 1  ou 0)
  resultado = Boolean(ExternalInterface.call("recebeDados", nome, texto));
  // Se o resultado for 1 (true, verdadeiro), mando para o quadro 1
  if(resultado == 1){
    gotoAndPlay("quadro1");
  }
  else // Se o resultado for diferente de 1, mando para o quadro 2
  {
    gotoAndPlay("quadro2");
  }
}

Agora a função javascript que recebe os parâmetros passados pelo flash:


function recebeDados(nome,texto){
    // Abaixo crio um elemento html contendo os dados que o usuário digitou no flash
    var novoHtml = 'Nome:
 '+nome+'
Comentário:
'+texto+'
'     // Abaixo insiro o elemento recém criado dentro da div com id 'div_resposta'     document.getElementById('div_reposta').innerHtml(novoHtml);
    // Se for encontrada a palavra 'futebol' no texto digitado pelo usuário, retorna true, se não, retorna false
    if(texto.indexOf("futebol")!=-1){
      return true;
    }else{
      return false;
    }
}

Uma coisa importante: a função javascript deve estar na mesma página que está executando o flash, ou em algum arquivo externo carregado por essa página.

O funcionamento ficou da seguinte maneira: num determinado frame do flash, o usuário vê uma campo para digitar seu nome, e um campo para digitar um texto, e um botão para enviar.

Ao enviar os dados digitados pelo usuários aparecem na página, fora do flash, numa div chamada ‘div_resposta’. Se o texto digitado pelo usuário conter a palavra ‘futebol’, o flash vai para o frame de label ‘quadro1′, se não, vai para o frame de label ‘quadro2′.

Agora liberte a sua imaginação e faça muitas coisas!

Até a próxima! Deixe um comentário!

Posts Relacionados:

JQuery autocomplete em ajax com php e mysql

foreach e in_array em javascript

Como passar parâmetros para um arquivo js

Como passar parâmetros para um arquivo js

Wellington Ribeiro — Tue, 22 Sep 2009 05:38:34 +0000

Olá!

Num dia destes eu precisei criar um arquivo js com parâmetros de configuração variáveis para cada caso específico.

Como uma solução pratica e rápida, eu costumava criar um arquivo php que gera o código do js, e assim eu poderia passar variáveis em get, no formato

arquivo.js.php?parametro=***¶metro2=*** etc

A questão é que ao editar este arquivo, não é muito agradável, principalmente se for muito longo, porque o arquivo é um PHP e os códigos javascript se tornam apenas textos simples para o editor (beleza, isso é o de menos ).

A idéia era passar parâmetros como fazemos com php, via get, da forma arquivo.js?parametro=valor¶metro2=valor… Pois bem, isso não é possível (até dá, mas você vai dar a volta ao mundo!).

Depois de fazer uma busca no Google por “Como passar parâmetros para um arquivo js”, e não achar nada satisfatório, parei para pensar um pouquinho, e encontrei uma solução muito simples: definir as variáveis antes de chamar o arquivo .js

Simples assim:

Dessa forma se torna muito simples passar variáveis, por exemplo, do php para o javascript, assim:

var par = "";

Ou ainda, se quiser passar um número variável de parâmetros:

Agora é só adaptar o código às suas necessidades.

Espero que esse artigo tenha sido últil! Deixe um comentário!

Até o próximo!

Posts Relacionados:

JQuery autocomplete em ajax com php e mysql

foreach e in_array em javascript

Como passar parâmetros do flash para o javascript e do javascript para o flash