Publicado em 18 de fev.

Sistema auto completar Google em php e MySql

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!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

João Batista Neto· 20 de fev.

@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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.visualcom.com.br/tutoriais/diagramas/MediatorClass.png&key=86039a91017d636297583e892a1a0e74222122548dafaf956f63642c2e62a775" alt="Imagem Postada" class="bbc_img">

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.visualcom.com.br/tutoriais/diagramas/MediatorSequence.png&key=2e29f01efb0b717cbf757c7090475736dcc1f4814a23ea839377cf356abda512" alt="Imagem Postada" class="bbc_img">

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](/profile/69222-william-bruno/) pelo reset do CSS, tkz !!!

pulao· 21 de fev.

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· 21 de fev.

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· 13 de fev.

Aqui também não funcionou.