[Resolvido] Autocomplete não busca todos os dados do banco

JRRC · Abril 1, 2010

Boa noite a todos do iMasters.

Bom pessoal estou tentando adaptar um script feito pelo William Bruno moderador aqui do forum.

Meu problema é o seguinte, tenho alguns campos que precisam ser preenchidos com alguns valores vindo do banco, tem até "dois" campos que preenchem com seus reais valores, no entanto, os outros campos são preenchidos com o "nome" da pessoa que busco no banco.

Os campos que são preenchidos com seus reais valores são "ID" e "Nome", o outros campos "cpf", "peso", "altura", "endereco" .. em seus input's aparece é o nome da pessoa que é resgatada do banco.

Alguém sabe me dizer como que faço para esses campos serem preenchidos com seus reais valores ?!

Abaixo está o codigo da pagina que estou usando para testes.

<html> 
<head> 
<title>Suggest</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
	$("input[name='suggest']").keyup(function(){
		createList('.suggest');
		$.ajax({
			type: "GET",//apenas pra ficar mais fácil de debugar, pode mudar para POST depois
			url: "function.php",
			data: "parte="+$(this).val(),
			success: function( data ){
				$("#suggest").html( data );
			}
		});
	});

	$("#suggest a").live('click', function( e ){
		e.preventDefault();
		var href = $(this).attr('href');
		var id = href.split('=');

		$("input[name='id']").val( id[1] );
		$("input[name='nome']").val( $(this).text() );
		$("input[name='suggest']").val( $(this).text() );
		$("input[name='cpf']").val( $(this).text() );
		$("input[name='email']").val( $(this).text() );
		$("input[name='peso']").val( $(this).text() );
		$("input[name='altura']").val( $(this).text() );
		$("input[name='endereco']").val( $(this).text() );

		$("#suggest").remove();
	});
	$("#suggest").mouseout(function(){
		$("#suggest").remove();
	});
});
function createList( el )
{
	$("#suggest").remove();

	var list = document.createElement('ul');
	list.id = 'suggest';
	$( el ).append( list );
}
</script> 
</head> 
<body> 
<form action="" method="post"> 
	<fieldset> 
		<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label> 

		ID: <input type="text" name="id" /><br>
		Nome: <input type="text" name="nome" /><br>
		CPF: <input type="text" name="cpf" /><br>
		Email: <input type="text" name="email" /><br>
		Peso: <input type="text" name="peso" /><br>
		Altura: <input type="text" name="altura" /><br>
		Endereço: <input type="text" name="endereco" /><br>
	</fieldset> 
</form> 
<p>Procure por: William, B, J..</p> 
</body> 
</html>

E aqui está a função que chamada no codigo em ajax

<?php
       header("Content-Type: text/html; charset=ISO-8859-1");

       echo suggest( getGet('parte') );

function suggest( $palavra )
{
       $sql = "SELECT * FROM cliente ";
       if( !empty($palavra) )
               $sql .= "WHERE nome LIKE '%{$palavra}%'";

       $mysqli = new mysqli( 'localhost','root','vertrigo','safen' );
       $query = $mysqli->query( $sql );
       if( $query->num_rows>0 )
       {
               $li='';
               while( $dados = $query->fetch_object() )
                       $li .= '<li><a href="?id='.$dados->id.'">'.$dados->nome.'</a></li>';
       }
       else
               $li = 'Nenhum cadastro encontrado!';

       return $li;
}
function getGet( $campo ){
       return ( isset($_GET[ $campo ]) ) ? filter( $_GET[ $campo ] ) : null;
}
function filter( $var )
{
       if( !get_magic_quotes_gpc() )
               $str = mysql_real_escape_string( $var );
       else
               $str = $var;
       $str = str_replace( '#', '\#', $str );
       return $str;
}
?>

Desde de já obrigado pela ajuda de todos.

William Bruno · Abril 1, 2010

Exemplo:

$li .= '<li><a href="?id='.$dados->id.'&cpf='.$dados->cpf.'&email='.$dados->email.'">'.$dados->nome.'</a></li>';

e então no JS você faz um 'parse' dessa query string retornada, e preenche os campos corretamente.

JRRC · Abril 1, 2010

O parse que você é para mim fazer da seguinte forma:

var href = $(this).attr('href');
href='{parse url="id=id&cpf=cpf&email=email"}';
var id = href.split('=');
var cpf = href.split('=');
var email = href.split('=');

Tentei fazer isso, mais continua da forma que antes, preechendo os outros campos com o "nome" da pessoa.

William Bruno · Abril 1, 2010

Não..

http://adamv.com/dev/javascript/querystring

JRRC · Abril 1, 2010

Vamos lá ver se eu entendi.

No primeiro exemplo que ele cita lá, que é o que estou pretendo fazer é o seguinte abaixo correto ?!

If querystring is passed, it should not begin with a "?".

// Parse the current page's querystring
var qs = new Querystring()

// Parse a given querystring
var qs2 = new Querystring("name1=value1&name2=value2")

Então eu baixo o script que ele disponibiliza lá http://adamv.com/dev/javascript/files/querystring.js então o chamo dentro de minha index, certo ?

<script type="text/javascript" src="jquerystring.js"></script>

Então em seguida devo instanciar um novo objeto, certo ?!

var qs = new Querystring()

E em seguida criar uma nova variável para que eu possa passar os valores que eu deseje que sejem "quebrados" certo ?

var qs2 = new Querystring("name1=value1&name2=value2")

Se todo esse meu raciocinio estiver correto, aonde devo chamar os seguinte itens abaixo :

var qs = new Querystring();
var qs2 = new Querystring("name1=value1&name2=value2");

Tentei chama-lo da seguinte maneira abaixo, mais não esta dando certo.

$("#suggest a").live('click', function( e ){
	e.preventDefault();
	var href = $(this).attr('href');
	var qs = new Querystring();
	var qs2 = new Querystring("id=id&cpf=cpf&email=email")
	var id = href.split('=');
	var cpf = href.split('=');
	var profissao = href.split('=');

É ai mesmo que devo chama-lo ? Está certo a maneira como estou passando os dados na var qs2 ? E se não for ai, aonde devo chama-lo ? E como chama-lo ?

Desde de já obrigado pela ajuda.

William Bruno · Abril 1, 2010

Quase isso cara.. você não precisa instanciar 2 vezes.

e não precisa mais dos splits

exemplo de uso:

<html>
<head>


<script>
/* Client-side access to querystring name=value pairs
	Version 1.3
	28 May 2008
	
	License (Simplified BSD):
	http://adamv.com/dev/javascript/qslicense.txt
*/
function Querystring(qs) { // optionally pass a querystring to parse
	this.params = {};
	
	if (qs == null) qs = location.search.substring(1, location.search.length);
	if (qs.length == 0) return;

// Turn <plus> back to <space>
// See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1
	qs = qs.replace(/\+/g, ' ');
	var args = qs.split('&'); // parse out name/value pairs separated via &
	
// split out each name=value pair
	for (var i = 0; i < args.length; i++) {
		var pair = args[i].split('=');
		var name = decodeURIComponent(pair[0]);
		
		var value = (pair.length==2)
			? decodeURIComponent(pair[1])
			: name;
		
		this.params[name] = value;
	}
}

Querystring.prototype.get = function(key, default_) {
	var value = this.params[key];
	return (value != null) ? value : default_;
}

Querystring.prototype.contains = function(key) {
	var value = this.params[key];
	return (value != null);
}
window.onload = function()
{
	var qs = new Querystring("id=15&cpf=111.111.111-11&email=email@provedor.com");
	alert( qs.get('id') );
	alert( qs.get('cpf') );
	alert( qs.get('email') );
}
</script>
</head>
<body>


</body>
</html>

JRRC · Abril 1, 2010

Só uma duvida, devo colocar este script acima do $(document).ready(function(){ }) ou abaixo dele ?!

E uma outra coisa, devo utiliza-lo por completo ou apenas uma parte dele ?!

Mais uma vez obrigado pela ajuda.

JRRC · Abril 1, 2010

Fiz alguns teste e tanto faz a posição do script antes ou depois do $(document).ready(function(){ }).

No entanto tentei varias formas de como fazer com que o javascript pegue a URL vindo da função no entanto nao tive sucesso em nenhuma das maneira tentadas.

Tem alguma outra indicação que você possa me indicar par que eu possa dá uma olhada ? Ou me dizer ai como que devo fazer.. rs

Mais uma vez obrigado pela ajuda, té mais.

William Bruno · Abril 2, 2010

a idéia era que você entendesse o código, e não ficasse copiando e colando oque eu posto.

$("#suggest a").live('click', function( e ){
        e.preventDefault();
        var href = $(this).attr('href');
        var qs = new Querystring( href );
        alert( qs.get('id') );
        alert( qs.get('cpf') );
        alert( qs.get('email') );

JRRC · Abril 2, 2010

Esse tipo de teste eu já tinha feito, o problema é que ele não pega o "ID" da URL pega todos os outros parâmetros, no entanto o ID não.

William Bruno · Abril 2, 2010

Uê... então continue pegando o id com:

var id = href.split('=');
                        
                        $("input[name='id']").val( id[1] );

por causa do sinal de ?

que o parse não funciona no id.

JRRC · Abril 2, 2010

Fazendo isso dá "certo" no entanto no valor do ID aparece o seguinte resultado 1&cpf invés de aparecer apenas "1"

Uma outra coisa, porque quando faço o seguinte abaixo, aparece apenas o nome "cpf" em vez do valor do "cpf"

var cpf = qs.get('cpf');
alert ("cpf");

William Bruno · Abril 3, 2010

Pq se você coloca aspas, quer dizer que você está pegando a string

se você quer uma variavel, você não coloca aspas

var cpf = qs.get('cpf');
alert ( cpf );

básico do básico, estude javascript.

JRRC · Abril 3, 2010

Pois é, apanhando muito, mais aprendendo em dobro.

Aprendi várias formas de como não se fazer.. rs

Mais uma vez, muitissimo obrigado William Bruno.

Parabéns pela dedicação ao fórum.

Arquivado

[Resolvido] Autocomplete não busca todos os dados do banco

Recommended Posts

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JRRC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

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

Fóruns

Tempo Real

Informação importante