Sistema auto completar Google em php e MySql

Abbel_junior · Fevereiro 18, 2010

Olá pessoal, pretendo implementar em meu formulário um sistema com base no buscador do Google, que ao digitar um nome, ele faça a consulta no BD e completa o formulário.

Tenho um formulario com os campos: "Nome, Email, endereço, telefone", gostaria de que ao digitar um nome que existe no BD, ele automaticamente preenchesse o restante do formulário com as informações do usuário.

Peço gentilmente essa força aki do pessoal, e levando em conta que não mando muito bem em php, sou iniciante e quro fazer mesmo do zero ,com ajuda do pessoal para que eu possa aprender tbm.

Aguardo!

João Batista Neto · Fevereiro 20, 2010

@Abbel_junior,

Existe um padrão de projeto muito bacana para esse propósito.

Quando você tem objetos na interface de usuário que precisam interagir entre si, você precisa remover a complexidade dessa operação dos próprios objetos:

Imagem Postada

O Mediator, como o próprio nome sugere, funciona como um mediador (ou diretor) dos objetos, permitindo, dessa forma, que os objetos (Colleagues) cooperem entre si, mas deixando a complexabilidade da operação para seu diretor, por exemplo, quando um determinado objeto muda seu estado, avisa o diretor que repassa a informação para o outro Colleague:

Imagem Postada

No caso de um autocomplete você teria um input onde o usuário vai digitar alguma coisa, assim que o input tem seu estado modificado (evento onchange) ele avisa o seu mediator que fará o trabalho e repassará para o seu outro objeto que seria uma lista com as sugestões:

Você poderia ter um HTML assim:

index.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<title>Mediator</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" href="public/css/style.css" type="text/css" />
</head>
<body onload="main();">
	<form id="fMediator" action="" method="post" onsubmit="return false; void(0);">
		<fieldset>
			<label for="iNome">
				<span>Nome: </span>
				<input type="text" id="iNome" name="iNome" />
			</label>
			<ul id="lTips"></ul>
		</fieldset>
	</form>
	<script type="text/javascript" src="public/js/Ajax.js"></script>
	<script type="text/javascript" src="public/js/AbstractColleague.js"></script>
	<script type="text/javascript" src="public/js/InputColleague.js"></script>
	<script type="text/javascript" src="public/js/ListColleague.js"></script>
	<script type="text/javascript" src="public/js/Mediator.js"></script>
	<script type="text/javascript">
		function main(){
			var server = new Mediator( 'test.php' );
			var input = new InputColleague( document.getElementById( 'iNome' ) );
			var list = new ListColleague( document.getElementById( 'lTips' ) );

			input.setMediator( server );
			list.setMediator( server );

			server.add( input );
			server.add( list );
		}

		function muda( nome ){
			document.getElementById( 'iNome' ).value = nome;
			document.getElementById( 'lTips' ).innerHTML = '';
		}
	</script>
</body>
</html>

AbstractColleague.js

/**
 * Interface para implementação de um Colleague
 * @constructor
 */
function AbstractColleague(){};
 
/**
 * Template method para envio de uma mensagem para o mediator
 * @param String message A mensagem que será enviada para o mediator
 */
AbstractColleague.prototype.send = function( message ){
	this.mediator.send( message , this );
};
 
/**
 * Template method para definição do Mediator
 * @param Mediator mediator
 */
AbstractColleague.prototype.setMediator = function( mediator ){
	if ( mediator instanceof Mediator ){
		this.mediator = mediator;
	} else {
		throw 'Opz, precisamos de um Mediator';
	}
};
 
/**
 * Template method para recuperação do Mediator
 * @return Mediator
 */
AbstractColleague.prototype.getMediator = function(){
	return this.mediator;
};
 
/**
 * Recebe a notificação do mediator caso um Colleague tenha seu estado modificado.
 * Precisa ser implementado nos Colleagues
 * @param String message
 */
AbstractColleague.prototype.notify = function( message ){};

InputColleague.js

/**
 * Implementação de do input
 * @param input Objeto do input onde o usuário irá digitar
 * @constructor
 */
function InputColleague( input ){
	var obj = this;
	var $_ = {
		onFocus : function(){
			this.onkeydown = function( evt ){
				if ( evt.keyCode >= 60 ){
					if ( this.timer ) clearInterval( this.timer );
					this.timer = setInterval( function( temp ){
						clearInterval( temp.timer );
						obj.getMediator().send( input.value , obj );
					} , 10 , this );
				}
			}
		},
		onBlur : function(){
			delete this.onkeydown;
		}
	};
	
	input.onfocus = $_.onFocus;
	input.onblur = $_.onBlur;
	
	this.input = input;
};
 
InputColleague.prototype = new AbstractColleague();
 
/**
 * Recebe a notificação do mediator que seu Colleague teve seu estado modificado
 * @param String message
 */
InputColleague.prototype.notify = function( message ){
	this.input.value = message;
};

ListColleague.js

/**
 * Implementação da listagem de sugestões
 * @param input Objeto do UL que receberá as LIs
 * @constructor
 */
function ListColleague( list ){
	this.list = list;
};
 
ListColleague.prototype = new AbstractColleague();
 
/**
 * Recebe a notificação do mediator que seu Colleague teve seu estado modificado
 * @param String message
 */
ListColleague.prototype.notify = function( message ){
	this.list.innerHTML = message;
};

Bom, temos os Colleagues, precisamos do Mediator:

Mediator.js

/**
 * Mediator
 * @param String url A URL que será usada para recuperar as sugestões do banco de dados
 * @construct
 */
function Mediator( url ){
	this.ajax = new Ajax();
	this.colleagues = new Array();
	this.url = url;
};
 
/**
 * Adiciona um Colleague que será mediado pelo Mediator
 * @param Colleague colleague
 */
Mediator.prototype.add = function( colleague ){
	if ( colleague instanceof AbstractColleague ){
		this.colleagues.push( colleague );
	} else {
		throw 'Opz, precisamos de um Colleague';
	}
};
 
/**
 * Usado pelos Colleagues para notificar uns aos outros sobre suas mudanças de estado
 * @param String message
 * @param Colleague colleague
 */
Mediator.prototype.send = function( message , colleague ){
	if ( colleague instanceof AbstractColleague ){
		var $this = this;
		
		message = [ 'message' , escape( message ) ].join( '=' );
		
		this.ajax.open( 'POST' , this.url , true );
		this.ajax.send( message );
		this.ajax.onreadystatechange = function(){
			if ( this.readyState == 4 ){
				for ( var obj in $this.colleagues ){
					if ( $this.colleagues[ obj ] !== colleague ){
						$this.colleagues[ obj ].notify( this.responseText );
					}
				}
			}
		}
		
	} else {
		throw 'Opz, precisamos de um Colleague';
	}
};

E um wrapper para Ajax que será usado pelo Mediator:

Ajax.js

function Ajax(){
	var xhttp;
	var obj = this;
	var update = function(){
		obj.readyState		= xhttp.readyState;
		obj.responseText	= xhttp.responseText;
		obj.status			= xhttp.status;
		obj.statusText		= xhttp.statusText;
		obj.multipart		= xhttp.multipart;
	}
	
	if ( window.XMLHttpRequest ){
		xhttp = this.xhttp = new XMLHttpRequest();
	} else {
		xhttp = this.xhttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
	}
	
	this.xhttp.onload = function(){
		update();
		obj.onload.apply( xhttp );
	}
	
	this.xhttp.onerror = function(){
		update();
		obj.onerror.apply( xhttp );
	}
	
	this.xhttp.onprogress = function(){
		update();
		obj.onprogress.apply( xhttp );
	}
	
	this.xhttp.onreadystatechange = function(){
		update();
		obj.onreadystatechange.apply( xhttp );
	};
}
 
var proto = Ajax.prototype;
 
proto.onload = function(){}
proto.onerror = function(){}
proto.onprogress = function(){}
proto.onreadystatechange = function(){}
 
proto.getAllResponseHeaders = function(){
	return this.xhttp.getAllResponseHeaders();
}
 
proto.getResponseHeader = function( name ){
	return this.xhttp.getResponseHeader( name );
}
 
proto.open = function( method , url , asynchronous ){
	if ( asynchronous == undefined ) asynchronous = true;
 
	this.method = method.toUpperCase();
	
	return this.xhttp.open( method , url , asynchronous );
}
 
proto.send = function( content ){
	if ( this.method != 'GET' ){
		this.setRequestHeader( 'Content-type' , 'application/x-www-form-urlencoded' );
		this.setRequestHeader( 'Content-length' , content.length );
		this.setRequestHeader( 'Connection' , 'close' );
	}
	
	this.setRequestHeader( 'X-Requested-With' , 'XMLHttpRequest' );
	
	return this.xhttp.send( content );
}
 
proto.setRequestHeader = function( field , value ){
	return this.xhttp.setRequestHeader( field , value );
}

O Ajax.js foi extruturado apenas para esse exemplo e não para ser reutilizado em produção, caso vá utilizar esse exemplo em produção sugiro o uso de jQuery.

A parte do servidor é bastante simples, receberemos um post com o conteúdo do input, buscaremos na base de dados as correspondências e retornaremos um conjunto de <li>...</li>, assim:

test.php

<?php
$headers = getallheaders();

if ( isset( $headers[ 'X-Requested-With' ] ) && ( $headers[ 'X-Requested-With' ] == 'XMLHttpRequest' ) ){
if ( ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ) && isset( $_POST[ 'message' ] ) ){
	$message = sprintf( '%s%%' , $_POST[ 'message' ] );
	$pdo = new PDO( 'mysql:host=127.0.0.1;dbname=test' , 'usuario' , 'senha' );
	$stm = $pdo->prepare( 'SELECT `u`.`usuariosNome` FROM `Usuarios` AS `u` WHERE `u`.`usuariosNome` LIKE :nome;' );
	$stm->bindParam( ':nome' , $message );

	if ( $stm->execute() ){
		$i = 0;

		foreach ( $stm->fetchAll( PDO::FETCH_OBJ ) as $row ){
			printf( '<li><a href="#" onclick="muda(\'%s\');">%s</a></li>' , $row->usuariosNome , $row->usuariosNome );
		}
	} else {
		header( sprintf( '%s 500 Internal Server Error' , $_SERVER[ 'SERVER_PROTOCOL' ] ) );
		var_dump( $stm->errorInfo() );
	}
} else {
	header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) );
}
} else {
header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) );
}

E para tudo isso funcionar, será necessário criar um banco de dados chamado test e nele uma tabela chamada Usuarios:

CREATE SCHEMA IF NOT EXISTS `test`;

CREATE TABLE IF NOT EXISTS `test`.`Usuarios` (
`idUsuarios` MEDIUMINT(8) UNSIGNED NOT NULL AUTO_INCREMENT,
`usuariosNome` VARCHAR(45) NOT NULL,
PRIMARY KEY(`idUsuarios`),
INDEX `usuarios`(`usuariosNome` ASC)
) ENGINE = MyISAM DEFAULT CHARACTER SET = utf8 COLLATE = utf8_general_ci;

E alguns dados para popular a tabela:

INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Joao');
INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Joao Batista');
INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Joao Batista Neto');
INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Joao Neto');
INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Jose');
INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Juliano');
INSERT INTO `test`.`Usuarios` (`idUsuarios`, `usuariosNome`) VALUES (NULL, 'Julio');

Só para fechar, uma folha de estilos para o formulário:

style.css

* {
	margin			: 0;
	padding			: 0;
	border			: none;
	text-decoration	: none;
}
 
body, html {
	margin 			: 10px;
	font-family		: Arial, Helvetica;
	font-size		: 14px;
}
 
form input#iNome {
	width			: 160px;
	border			: 1px solid #dadada;
	*margin			: 0px 0px 0px 4px;
}
 
form label span {
	display			: inline-block;
	width			: 50px;
	text-align		: right;
}
 
ul#lTips {
	border			: 1px solid #dadada;
	width			: 160px;
	max-height		: 100px;
	overflow		: auto;
	margin			: 0px 0px 0px 54px;
	*height			: 0px;
}
 
ul#lTips li a {
	display			: block;
	width			: 100%;
	line-height		: 24px;
	height			: 24px;
	color			: #333333;
}
 
ul#lTips li a:hover {
	color			: #FF0000;
}

PS: Agradecimento ao @William Bruno pelo reset do CSS, tkz !!!

pulao · Fevereiro 21, 2010

minha duvida ainda é a seguinte, digitaria o codigo em um formulario, depois daria um tab e os dados completassem automaticamente, esse codigo tem essa função ou ele executa outra coisa?

Abbel_junior · Fevereiro 21, 2010

João Batista !

Uma verdadeira áula e/ou obra prima que inclusive veio me ajudar a entender outras coisas aki.

Porém não funcionou, montei e verifiquei o cod. também e não consegui fazer funcionar ...

Aguardo mais um apoio .... at+

Paulo Rodrigo · Fevereiro 13, 2011

Aqui também não funcionou.

Entrar

Arquivado

Sistema auto completar Google em php e MySql

Recommended Posts

Abbel_junior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

pulao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Abbel_junior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo Rodrigo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante