Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

flavialieggio

auto completar

Por , em Javascript

Recommended Posts

micox    2

micox
Postado

Deu um trabalho bom (fiquei até agora trabalhando nele sem parar) mas enfim, saiu:

 

<script src="engine/micoxAjax.js" type="text/javascript" language="javascript"></script><script language="javascript">function pega(quem){return document.getElementById(quem);}function pesquisa(e,valor){	/* crossbrowser elcio */	if(typeof(e)=='undefined')var e=window.event	source=e.target?e.target:e.srcElement	if(source.nodeType == 3)source = source.parentNode	/* fim crossbrowser */	/* capturando se o cara digitar seta pra baixo */	if(e.keyCode==40){ //seta pra baixo		pega("pagina").selectedIndex = 0;		pega("pagina").focus();		return true;	}	/* fim capturando */		//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX	url="reste.php?valor="+valor;	ajaxGet(url,pega("pagina"),true)	}function altera(e,quem){	/* crossbrowser elcio */	if(typeof(e)=='undefined')var e=window.event	source=e.target?e.target:e.srcElement	if(source.nodeType == 3)source = source.parentNode	/* fim crossbrowser */	/* capturando se o cara digitar seta pra baixo */	if(e.keyCode==13 || e.keyCode==32){ //enter ou espaço		alteraReal(quem);	}	/* fim capturando */}function alteraReal(quem){	pega("nome").value = quem.value;	pega("nome").focus();	quem.style.visibility="hidden";}</script><style>* { padding:0; margin:0;}#tudo {  width:650px;  background-color:#f7f7f7;  font-size:10px;    font-weight: bold;  font-family: Verdana, Arial, Helvetica, sans-serif;}h2 {  font-size:10px;    color:#FF0000;  text-align:center;  background-color:#CCCCCC;}label {  cursor:pointer;}#nome {  width:150px;}#pagina {  position:absolute; /* isso aqui tem que ficar */  border:1px solid green;  height:120px;  visibility:hidden;}</style><body><div id="tudo"><h2><- BUSCA DINÂMICA -></h2><label for="nome">DIGITE AQUI O NOME DA PESSOA:</label><input type="text" id="nome" name="nome" onkeyup="pesquisa(event,this.value)" /><select name="pagina" id="pagina" onkeyup="altera(event,this)" onblur="alteraReal(this)" size="4"></select></div> <!-- fim da div tudo -->

A única coisa que irá mudar no arquivo micoxAjax.js é nesta linha:

pega("pagina").style.visibility="visible;"

deverá tirar o ponto-vírgula:

pega("pagina").style.visibility="visible"

 

Com sua licença poderia publicar a solução no meu blog também... ?? (editado)

Testae... Testei no FF e IE6 com sucesso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

ola micox, copiei o codigo, modifiquei a linha... te ai beleza, mas nao ta aparecendo nada aqui... vou postar meu codigo!!

 

html:

<html> <head> <title>BUSCA DINÂMICA</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="script1.js"></script> <script language="javascript">function pesquisa(e,valor){	/* crossbrowser elcio */	if(typeof(e)=='undefined')var e=window.event	source=e.target?e.target:e.srcElement	if(source.nodeType == 3)source = source.parentNode	/* fim crossbrowser */	/* capturando se o cara digitar seta pra baixo */	if(e.keyCode==40){ //seta pra baixo		pega("pagina").selectedIndex = 0;		pega("pagina").focus();		return true;	}	/* fim capturando */		//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX	url="busca_nome.php?valor="+valor;	ajaxGet(url,pega("pagina"),true)	}function altera(e,quem){	/* crossbrowser elcio */	if(typeof(e)=='undefined')var e=window.event	source=e.target?e.target:e.srcElement	if(source.nodeType == 3)source = source.parentNode	/* fim crossbrowser */	/* capturando se o cara digitar seta pra baixo */	if(e.keyCode==13 || e.keyCode==32){ //enter ou espaço		alteraReal(quem);	}	/* fim capturando */}function alteraReal(quem){	pega("nome").value = quem.value;	pega("nome").focus();	quem.style.visibility="hidden";}</script><style>* { padding:0; margin:0;}#tudo {  width:650px;  background-color:#f7f7f7;  font-size:10px;    font-weight: bold;  font-family: Verdana, Arial, Helvetica, sans-serif;}h2 {  font-size:10px;    color:#FF0000;  text-align:center;  background-color:#CCCCCC;}label {  cursor:pointer;}#nome {  width:150px;}#pagina {  position:absolute; /* isso aqui tem que ficar */  border:1px solid green;  height:120px;  visibility:hidden;}</style><body><div id="tudo"><h2><- BUSCA DINÂMICA -></h2><label for="nome">DIGITE AQUI O NOME DA PESSOA:</label><input type="text" id="nome" name="nome" onkeyup="pesquisa(event,this.value)" /><select name="pagina" id="pagina" onkeyup="altera(event,this)" onblur="alteraReal(this)" size="4"></select></div> <!-- fim da div tudo --></body> </html>

JS

// JavaScript Document // FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP // E RETORNAR OS RESULTADOS function pega(quem){ return document.getElementById(quem);}function ajaxGet(url,pega("pagina"),false){/****** * ajaxGet - Coloca o retorno de uma url em um elemento qualquer* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.* Versão: 1.2 - 20/04/2006* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br* Parametros:* url: string; elemento_retorno: object||string; exibe_carregando:boolean*  - Se elemento_retorno for um elemento html (inclusive inputs e selects),*	exibe o retorno no innerHTML / value / options do elemento*  - Se elemento_retorno for o nome de uma variavel*	(o nome da variável deve ser declarado por string, pois será feito um eval)*	a função irá atribuir o retorno à variável ao receber a url.*******/	var ajax1 = pegaAjax();	if(ajax1){		url = antiCacheRand(url)		ajax1.onreadystatechange = ajaxOnReady		ajax1.open("GET", url ,true);		ajax1.setRequestHeader("Cache-Control", "no-cache");		ajax1.setRequestHeader("Pragma", "no-cache");		if(false){ put("Carregando ...")	}		ajax1.send(null)		return true;	}else{		return false;	}	function ajaxOnReady(){		if(ajax1.status == 200){			var texto=ajax1.responseText;			if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");				put(texto);				extraiScript(texto);			/******* adicionei pra voce flavia ***/			pega("pagina").style.width = pega("nome").offsetWidth;			pega("pagina").style.left = pega("nome").offsetLeft + "px";			pega("pagina").style.top = (pega("nome").offsetTop + pega("nome").offsetHeight) + "px";			pega("pagina").style.visibility="visible"			/***** fim autocompletar flavia ***/			}else{				if(false){put("Falha no carregamento. " + httpStatus(ajax1.status));}			}	}	function put(valor){ 		if((typeof(pega("pagina"))).toLowerCase()=="string"){ 			if(valor!="Falha no carregamento"){ 				eval(pega("pagina") + '= unescape("' + escape(valor) + '")')			}		}else if(pega("pagina").tagName.toLowerCase()=="input"){			valor = escape(valor).replace(/\%0D\%0A/g,"")			pega("pagina").value = unescape(valor);		}else if(pega("pagina").tagName.toLowerCase()=="select"){					select_innerHTML(pega("pagina"),valor)		}else if(pega("pagina").tagName){			pega("pagina").innerHTML = valor;		}		}	function pegaAjax(){ 		if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}		var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];		for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }		return null;	}	function httpStatus(stat){ 		switch(stat){			case 0: return "Erro desconhecido de javascript";			case 400: return "400: Solicitação incompreensível"; break;			case 403: case 404: return "404: Não foi encontrada a URL solicitada"; break;			case 405: return "405: O servidor não suporta o método solicitado"; break;			case 500: return "500: Erro desconhecido de natureza do servidor"; break;			case 503: return "503: Capacidade máxima do servidor alcançada"; break;			default: return "Erro " + stat + ". Mais informações em [url=http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html";]http://www.w3.org/Protocols/rfc2616/rfc261...c10.html";[/url] break;		}	}	function antiCacheRand(aurl){		var dt = new Date();		if(aurl.indexOf("?")>=0){			return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());		}else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}	}}function select_innerHTML(objeto,innerHTML){/****** * select_innerHTML - altera o innerHTML de um select independente se é FF ou IE* Corrige o problema de não ser possível usar o innerHTML no IE corretamente* Veja o problema em: [url=http://support.microsoft.com/default.aspx?scid=kb;en-us;276228]http://support.microsoft.com/default.aspx?...kb;en-us;276228[/url]* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.* Versão: 1.0 - 06/04/2006* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br* Parametros:* objeto(tipo object): o select a ser alterado* innerHTML(tipo string): o novo valor do innerHTML*******/	objeto.innerHTML = ""	var selTemp = document.createElement("micoxselect")	var opt;	selTemp.id="micoxselect1"	document.body.appendChild(selTemp)	selTemp = document.getElementById("micoxselect1")	selTemp.style.display="none"	if(innerHTML.toLowerCase().indexOf("<option")<0){		innerHTML = "<option>" + innerHTML + "</option>"	}	innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")	selTemp.innerHTML = innerHTML	for(var i=0;i<selTemp.childNodes.length;i++){		if(selTemp.childNodes[i].tagName){			opt = document.createElement("OPTION")			for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){				opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))			}			opt.value = selTemp.childNodes[i].getAttribute("value")			opt.text = selTemp.childNodes[i].innerHTML			if(document.all){ 				objeto.add(opt)			}else{				objeto.appendChild(opt)			}							}		}	document.body.removeChild(selTemp)	selTemp = null}function extraiScript(texto){//Maravilhosa função feita pelo SkyWalker.TO do imastersforum//http:forum.imasters.com.br/index.php?showtopic=165277&	var ini = 0;	while (ini!=-1){		ini = texto.indexOf('<script', ini);		if (ini >=0){			ini = texto.indexOf('>', ini) + 1;			var fim = texto.indexOf('</script>', ini);			codigo = texto.substring(ini,fim);			/**********************			* Alterado por Micox - micoxjcg@yahoo.com.br			* Alterei pois com o eval não executava funções.			***********************/			novo = document.createElement("script")			novo.text = codigo;			document.body.appendChild(novo);		}	}}

consulta

<?php if(!empty($_GET["valor"])){ 	// O CAMPO VALOR CONTERÁ O QUE O USUARIO DIGITOU ATÉ O MOMENTO.. 	// CONECTA AO BANCO COLOCA PARAMENTROS IP,USUARIO,SENHA 	include ('conexao.php');	$query = "SELECT * FROM sipesca.pescatb030_proprietario WHERE DE_PROPRIETARIO like UPPER('$_GET[valor]%')";	$statement = OCIParse ($conn, $query);	OCIExecute ($statement);	while (OCIFetchInto ($statement, $row, OCI_ASSOC)) {   		//print $row['NU_PROPRIETARIO'];		echo "<option value='".$row['NU_PROPRIETARIO']."'>".$row['DE_PROPRIETARIO']."</option>";   		//print $row['DE_PROPRIETARIO'];	}	ocilogoff($conn);}?>

oh micox, qto a publicar, fique a vontade!!! acho mesmo e q temos q compartilhar

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

1) retire uma das funções pega(), tá com duas. Uma no script.js e outra na página mesmo2) Vá no Console de erros do firefox, limpe todos os erros, recarregue nossa página, faça a consulta novamente e veja se o FF retornou algum erro.3) Vá direto no endereço do browser e digite: busca_nome.php?valor=AlgumNome e veja se retorna alguma coisa. Seu erro pode estar no PHP.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ah, esqueci de postar comé que ficou meu php de teste pra função:

 

<option value="<?php echo $_GET["valor"]?>"><?php echo $_GET["valor"]?></option><option value="111">111</option><option value="222">222</option><option value="333">333</option><option value="444">444</option>

Só isso, nem uma tag a mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

e ai, micox!!!

erros:

Erro: missing ) after formal parameters

Arquivo-fonte: http://localhost/ajax/teste/script1.js

Linha: 6, Coluna: 25

Código-fonte:

function ajaxGet(url,pega("pagina"),false)

 

Erro: ajaxGet is not defined

Arquivo-fonte: http://localhost/ajax/teste/index1.php

Linha: 25

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ops. tá errada, foi mal... Eu também mudei ela.O certo dela é assim:pega("pagina").style.top = (pega("nome").offsetTop + pega("nome").offsetHeight) + "px";Com ela to posicionando a página pra ficar logo abaixo do nome.

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

bom dia micox... tu viu os erros acima.... porque que ta "Erro: ajaxGet is not defined"????tava testando agora, e ele apareceu uma opção de nome que eu ja havia digitado, como e que eu faço agora pra ele trazer as opções da consulta do banco?? isso ele nao ta trazendo.... vou dar uma checada no meu php

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

ola micox.. ja to pra ficar doida com esse negocio.... :)bom, ja mudei tanta coisa no php, e nada resolve...ja testei a consulta a parte e ela ta trazendo dados redondinho.... no nosso codigo parece que ela nao ta recebendo aquele $_GET["valor"]!!!! e o que mais me intriga e que antes de comecarmos a modificar o code, a consulta funcionava bele....agora...... nao sei mesmo o que fazer.....

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Falou que o ajaxGet não existia porque tinha um erro dentro dele.Quando tem um erro dentro de uma função, ela não é gerada.Talvez o erro dentro do ajaxGet tá por causa de um comentário que pulou pra proxima linha e deixou de ser comentário. Olha: //ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");Será que é culpa dessa linha acima? Olha ela direitinho lá.

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

apareceu os mesmos erros.... corrigi o lance dos comentarios, mas ate agora nada.... ele aparece beleza o nome que ja havia digitado em outro lugar, mas os nomes da consulta..... nem sonhando... :(

 

tem um erro que passa na linha 6(o primeiro erro) e aparece uma setinha apontando pra

function ajaxGet(url,pega("pagina"),false).... vou colocar novamente o erro aqui:

 

Erro: missing ) after formal parameters

Arquivo-fonte: http://localhost/ajax/teste/script1.js

Linha: 6

Código-fonte:

function ajaxGet(url,pega("pagina"),false){

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

O código ainda tá como voce postou lá encima ou já alterou?Se tiver alterado, posta ele lá (editando) pra eu testar o sistema por completo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

AAaaaaaaaaaaaaaaaaaaaaanãaao. Errinhos básicos de javascript.

Coisa simples mesmo. Era só voce ir lá na linha que o Firefox falou e olhar que voce já encontrava o erro.

 

Erro 1 no arquivo script1.js :

Voce alterou o cabeçalho da minha função ajaxGet. O pega("pagina") não pode ficar lá. Voce não pode alterar a declaração da função. O certo é do jeito que eu publiquei:

function ajaxGet(url,elemento_retorno,exibe_carregando)
Láaa na hora de chamar é que voce usa:

ajaxGet(url,pega("pagina"),true) sacou???

 

Erro 2:

O fórum aqui colocou uns textos em uma url que eu indiquei. É só voce corrigir e voltar ao que estava antes. A linha 79 deve ficar assim:

default: return "Erro " + stat + ". Mais informações em http://www.w3.org/Protocols/rfc2616/rfc261...c10.html";

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

caracas, micox!!!! desculpa pelo meu erro!!!! puts!!! deu tudo certo!!!!Valeu mesmo pela paciencia, pela ajuda!!!!!!VALEU MESMO!!! muito obrigada por tudo!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

agora esta tudo funcionando certinho.. aparece a pesquisa certinha redondinha!!! valeu pela orientação, pela paciencia, mais uma vz!!!Flávia

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Uai. Voce tá aqui em valparaizo????Que milagre.A primeira pessoa de Goiás que eu vejo aqui no fórum, fora eu. hehaeh

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito