[Resolvido] Busca Dinâmica com Ajax em Múltiplos Campos

[Thiago_si 0]

Olá Pessoal!

 

Bom dia.

 

Pelo post anterior eu estava tentando fazer uma busca dinãmica com ajax e depois de quebrar bastante a cabeça eu consegui adaptar ao que eu queria.

 

A busca consiste em digitar um código e aparecer o nome da pessoa.

 

Só que dessa vez existem 7 campos na mesma página que fazem o mesmo tipo de busca e é inviável criar um arquivo de ajax para cada um.

 

Qual foi minha idéia...a partir dessa função...:

<script src="funcoes/_ajax_busca_destaques.js"></script>
<script>
function pesquisa_destaque(valor)
{
//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX
url="textos_buscar_destaque.php?valor="+valor;
ajax(url);
}
</script>

//CÓDIGO DO ARQUIVO _ajax_busca_destaques.js
function ajax(url) 
{ 
    req = null; 
    // Procura por um objeto nativo (Mozilla/Safari) 
    if (window.XMLHttpRequest) { 
        req = new XMLHttpRequest(); 
        req.onreadystatechange = processReqChange; 
        req.open("GET",url,true); 
        req.send(null); 
    // Procura por uma versão ActiveX (IE) 
    } else if (window.ActiveXObject) { 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
        if (req) { 

            req.onreadystatechange = processReqChange; 
         req.open("GET",url,true); 
 
            req.send(); 
        } 
    } 
} 

function processReqChange() 
{ 

    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 

        // apenas se o servidor retornar "OK" 

        if (req.status == 200) {
            
document.getElementById('lblDestaque1').innerHTML = req.responseText; 

        } else { 
            alert("Houve um problema ao obter os dados:" + req.statusText); 
        } 
    } 
}

...eu pretendo passar como parâmetro o nome do campo que fez a solicitação!

 

A partir disso fazer uma estrutura de condição para direcionar o conteúdo retornado pela requisição para o respectivo label do campo!

 

Tenho tudo isso na teoria, porém na prática... =)

 

A única coisa que ainda não consegui descobrir é a forma de pegar o nome do campo que faz a requisição!

 

Código HTML:

//CAMPO QUE FAZ A REQUISIÇÃO
<input name="idDestaque1" id="idDestaque1" type="text" [u]onblur="pesquisa_destaque(this.value)"[/u] value="<?php echo $idDestaque1?>" size="2" onkeydown="mascara(this,soNumeros)"/>

//CAMPO QUE RECEBE O VALOR RETORNADO
<td class="tdLabelMed" rowspan="2">Título do Imóvel:</td>
<td class="tdField"><label id="lblTitulo1"><?php echo $Titulo1;?></label></td>

Quem souber como ajudar...

 

Desde ja agradecido!

 

Abraço a todos

[Thiago_si 0]

Resolvido também.

 

Consegui fazer exatamente o que eu tinha em mente. No evento OnBlur do campo alem do "this.value" eu acrescentei "this.value, this.id".

 

Atribuí id = campo;

 

Em:

function processReqChange() 
{ 

    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 

        // apenas se o servidor retornar "OK" 

        if (req.status == 200) {

//ACRESCENTEI ISSO:
            
if (campo == 'idSuper')
	document.getElementById('lblSuper').innerHTML = req.responseText; 
if (campo == 'idDestaque1')
	document.getElementById('lblTitulo1').innerHTML = req.responseText; 
if (campo == 'idDestaque2')
	document.getElementById('lblTitulo2').innerHTML = req.responseText; 
if (campo == 'idDestaque3')
	document.getElementById('lblTitulo3').innerHTML = req.responseText; 
if (campo == 'idDestaque4')
	document.getElementById('lblTitulo4').innerHTML = req.responseText; 
if (campo == 'idDestaque5')
	document.getElementById('lblTitulo5').innerHTML = req.responseText; 
if (campo == 'idDestaque6')
	document.getElementById('lblTitulo6').innerHTML = req.responseText;  

        } else { 
            alert("Houve um problema ao obter os dados:" + req.statusText); 
        } 
    } 
}

Estou postando as soluções para que outros com o mesmo problema possam encontrar aqui alguma coisa que lhes sirvam!

 

Abraço!

[Lucas Moreira 0]

Sei que o tópico é antigo, mas vou dar uma solução mais prática.

Independente de quantos campos tenham no form, basta fazer assim:

 

ajax.js

 

function ajax(url,destino) {
req = null;
if (window.XMLHttpRequest) { // Procura por um objeto nativo (Mozilla/Safari)
	req = new XMLHttpRequest();
	req.onreadystatechange = processReqChange;
	req.open("GET",url,true); //abre a requisição para o arquivo php que pesquisará o estado
	req.send(null);
} else if (window.ActiveXObject) { // Procura por uma versão ActiveX (IE)
	req = new ActiveXObject("Microsoft.XMLHTTP");
	if (req) {
		req.onreadystatechange = processReqChange;
		req.open("GET",url,true); //abre a requisição para o arquivo php que pesquisará o estado
		req.send();
	}
}
destino_retorno = destino;
}

function processReqChange() {
if (req.readyState == 4) { // apenas quando o estado for "completado"
	if (req.status == 200) { // apenas se o servidor retornar “OK”
		document.getElementById(destino_retorno).innerHTML = req.responseText;
	} else {
		alert("Houve um problema ao obter os dados:n" + req.statusText);
	}
} else if (req.readyState == 1) {
	document.getElementById(destino_retorno).innerHTML = '<span style="font-family:Arial;color:#666666;">Carregando</span>';	
}
}

 

a função que vai chamar o ajax.js:

 

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
   function preenche(id) {
     var url = "arquivo_que_vai_processar.php?id_campo=" + id; //monta a url que será "processada" pelo ajax
     ajax(url,"campo" + id); //devolve a resposta no "campo" + id. Ou seja campo1, campo2, campo300
   }
</script>

 

e nos inputs do form

 

<input type="text" id="campo1" onblur="preenche(this.id)" />
<input type="text" id="campo2" onblur="preenche(this.id)" />
...
<input type="text" id="campo300" onblur="preenche(this.id)" />

[ismael.oliveira 0]

olá lucas!

 

Cara eu sou novo em php + ajax, por favor me corrija se eu estiver errado.

 

pelo o que eu entendi no seu código o retorno da sua busca fica sendo do ultimo campo que foi digitado exemplo: digamos que eu tenho os campos nome e cidade onde quando eu digitar no campo nome ele vai me trazer o resultado referente aquele campo e se eu tb digitar no campo cidade ele so vai me retorna um resultado referente ao campo cidade, pois os campos e passado 1 por vez.

 

Obrigado pela atenção!

 

Ismael Francisco.

[William Bruno 1501]

exatamente @ismael.oliveira, você entendeu corretamente como funciona o script acima.

 

tens alguma duvida ?

se não for referente a este topico, pode abrir um novo.