auto completar

[flavialieggio 0]

agora entendi :)...Fazendo o teste aqui, ele nao ta aparecendo nada.. nenhuma opção no select....

[marcinhha 0]

Não é isso aqui que você quer?

 

http://ajax.zervaas.com.au/examples/GoogleSuggestCloneJax/

[flavialieggio 0]

ola marcinha.... e mais ou menos... imagine você na pagina inicial do google... qdo você comeca a digitar no campo uma palavra que você queira pesquisar, por exemplo, iniciando com a, vao aparecer todas as opções que começam com a e por ai vai, um auto complemento.. qdo tem a aplavra que você quer nas opções que aparecem você tem como seleciona-la!!! e isso q to qurendo...ta confuso??? :)

[marcinhha 0]

Ué.. mas esse link acima faz exatamente isso! Não?

[flavialieggio 0]

desculpa marcinha... bom pelo menos qdo digitei nao apareceu opção nenhuma... :(

[marcinhha 0]

Aqui aparece assim:

 

 

 

 

 

Não é assim?

Que browser você tah? Eu usei no Firefox e IE 6 tb vai...

[micox 2]

Ah sim...

Fazendo o teste aqui, ele nao ta aparecendo nada.. nenhuma opção no select....

Não tá aparecendo porque nós esquecemos de colocar o id no select e só colocamos o name. hehe. Foi só esquecimento. Muda ae:<select name="pagina" id="pagina" onchange="document.getElementById('nome').value=this.value" size="4">

[flavialieggio 0]

aqui nao apareceu assim nao... eu teste ni IE, mas esqueço que essa versao 7 em um ........ sem comentarios.... mas e isso ai marcinha que to querendo

[marcinhha 0]

IE 7? afe... larga mão!!! Ainda eh beta... dizem que o proximo beta vai ser TOTALMENTE diferente...Testa no Firefox e IE 6 no máximo...Nesse link que passei tem todo o código explicando direitinho.. :)Ow só tenta modificar o que o micox disse.. as vezes eh mais rapido...

[flavialieggio 0]

acrescentei nossa id, mas nao ta aprecendo nenhum nome da consulta... antes das modificações aparecia agora nada.... :( essa consulta que faço e do banco de dados... sera que ta faltando algo???

[micox 2]

Ahh sim.. Já sei.

 

Antes, o php retornava algo pra ser jogado dentro de div.

Agora ele deve gerar tags options, pra jogar dentro do select.

 

Só que há um problema. O IE é meio chato pra renderizar innerHTML em selects.

 

2 soluções:

1) Usar minha função rápida pra ajax ( aqui no fórum também postei ela).

Pois ela faz inserção de innerHTML dentro de selects corretamente (sem gerar bugs no IE)

 

ou

 

2) Ir pela solução da marcinha.

[flavialieggio 0]

desculpa a demora micox,

 

entao vou subistituir a funcao ajax q ja tem pela sua.. me explica uma coisa:

a atual funcao esta assim:

function ajax(url){

a sua e assim:

function ajaxGet(url,elemento_retorno,exibe_carregando){

o que declaro nesses outros campos??

 

o nosso codigo vai ficar assim entao:

 

codigo:

// 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,elemento_retorno,exibe_carregando){/****** * 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.0 - 06/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){		ajax1.onreadystatechange = ajaxOnReady		ajax1.open("GET", url ,true);		if(exibe_carregando){ put("Carregando ...")	}		ajax1.send(null)		return true;	}else{		return false;	}	function ajaxOnReady(){		if (ajax1.readyState==4){			if(ajax1.status == 200){				var texto=ajax1.responseText;				if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");				//texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp				put(texto);			}else{				if(exibe_carregando){put("Falha no carregamento");}			}			ajax1 = null		}else if(exibe_carregando){//para mudar o status de cada carregando				put("Carregando ..." )		}	}	function put(valor){ //coloca o valor na variavel/elemento de retorno		if((typeof(elemento_retorno)).toLowerCase()=="string"){ //se for o nome da string			if(valor!="Falha no carregamento"){ 				eval(elemento_retorno + '= unescape("' + escape(valor) + '")')			}		}else if(elemento_retorno.tagName.toLowerCase()=="input"){			valor = escape(valor).replace(/\%0D\%0A/g,"")			elemento_retorno.value = unescape(valor);		}else if(elemento_retorno.tagName.toLowerCase()=="select"){					select_innerHTML(elemento_retorno,valor)		}else if(elemento_retorno.tagName){			elemento_retorno.innerHTML = valor;			//alert(elemento_retorno.innerHTML)		}		}	function pegaAjax(){ //instancia um novo xmlhttprequest		//baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original		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 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: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228* 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){//se não é option eu converto		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){ //IEca				objeto.add(opt)			}else{				objeto.appendChild(opt)			}							}		}	document.body.removeChild(selTemp)	selTemp = null}function processReqChange() { // apenas quando o estado for "completado" if (req.readyState == 4) { // apenas se o servidor retornar "OK" if (req.status ==200) {// procura pela div id="pagina" e insere o conteudo// retornado nela, como texto HTMLdocument.getElementById('pagina').innerHTML = req.responseText;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;"}else { alert("Houve um problema ao obter os dados:n" + req.statusText); } } }

nao entendi bem os campos que postei anteriormente.. qual a diferenca???

[micox 2]

Opa.

 

fica assim:

 

url - coloca a mesma url que voce tava mandando com a sua função

 

elemento_retorno - coloca o document.getElementById("seu_select")

 

exibe_carregando - coloca false.

 

Ficará:

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

 

E voce terá que editar um pedaço do meu ajaxGet. Lá na função ajaxOnReady voce deverá colocar o código pra exibir o select no local certo. Ficará:

if(ajax1.status == 200){				var texto=ajax1.responseText;				if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");				//texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp				put(texto);				extraiScript(texto);/******* adicionei pra voce flavia ***/elemento_retorno.style.width = pega("nome").offsetWidth;elemento_retorno.style.left = pega("nome").offsetLeft + "px";elemento_retorno.style.top = (pega("nome").offsetTop + elemento_retorno.offsetHeight) + "px";elemento_retorno.style.visibility="visible;"/***** fim autocompletar flavia ***/			}else{				if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}			}

Testa ae...

[flavialieggio 0]

Oi micox...

 

bom o nosso codigo ta assim.

 

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> function pesquisa(valor) { //FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX url="busca_nome.php?valor="+valor; ajax(url); }</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></head> <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" onkeypress="pesquisa(this.value)"><select name="pagina" id="pagina" onchange="document.getElementById('nome').value=this.value" size="4"><!-- os options que serão carregados pelo ajax ficarão aqui --></select></div></body> </html>

script.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);}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("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");		ajax1.setRequestHeader("Cache-Control", "no-cache");		ajax1.setRequestHeader("Pragma", "no-cache");		if(exibe_carregando){ 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," ");				//texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp				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("pagina").offsetHeight) + "px";			pega("pagina").style.visibility="visible;"			/***** fim autocompletar flavia ***/			}else{				if(false){put("Falha no carregamento. " + httpStatus(ajax1.status));}			}	}	function put(valor){ //coloca o valor na variavel/elemento de retorno		if((typeof(pega("pagina"))).toLowerCase()=="string"){ //se for o nome da 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;			//alert(elemento_retorno.innerHTML)		}		}	function pegaAjax(){ //instancia um novo xmlhttprequest		//baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original		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){ //retorna o texto do erro http		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){// já tem parametros			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){//se não é option eu converto		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){ //IEca				objeto.add(opt)			}else{				objeto.appendChild(opt)			}							}		}	document.body.removeChild(selTemp)	selTemp = null}function extraiScript(texto){//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum//http://forum.imasters.com.br/index.php?showtopic=165277&	// inicializa o inicio ><	var ini = 0;	// loop enquanto achar um script	while (ini!=-1){		// procura uma tag de script		ini = texto.indexOf('<script', ini);		// se encontrar		if (ini >=0){			// define o inicio para depois do fechamento dessa tag			ini = texto.indexOf('>', ini) + 1;			// procura o final do script			var fim = texto.indexOf('</script>', ini);			// extrai apenas o script			codigo = texto.substring(ini,fim);			// executa o script			//eval(codigo);			/**********************			* 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);		}	}}function processReqChange() { // apenas quando o estado for "completado" if (req.readyState == 4) { // apenas se o servidor retornar "OK" if (req.status ==200) {// procura pela div id="pagina" e insere o conteudo// retornado nela, como texto HTMLdocument.getElementById('pagina').innerHTML = req.responseText;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;"}else { alert("Houve um problema ao obter os dados:n" + req.statusText); } } }

essa funcao

function processReqChange(){

tem que tira-la???? ou pode deixar......

[flavialieggio 0]

você se estou correta no arquivo codigo.html tenho que mudar ajax(url); paraajaxGet(url,pega("pagina"),false)?????

[micox 2]

Tira ela, ela não está mais sendo necessária.

 

Ah e voce tem que mudar sua função pesquisa() também esqueceu? Tem que chamar a ajaxGet() e não a ajax():

 

function pesquisa(valor){//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAXurl="busca_nome.php?valor="+valor;//ajax(url);ajaxGet(url,pega("pagina"),false)}

[flavialieggio 0]

micox, parece ate brincadeira, mas nao ta aparecendo nada... nem uma opçãozinha... nada :(.....

[marcinhha 0]

você ainda tah com o IE7??

[micox 2]

micox, parece ate brincadeira, mas nao ta aparecendo nada... nem uma opçãozinha... nada

voce já mandou seu php retornar options???POr exemplo. Seu php (a página busca_nome.php) deverá retornar as opções da seguinte forma:

<option>111111</option><option>222222</option><option>333333</option>

[flavialieggio 0]

sim... olha so:

 

<?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>"   		//echo $row['DE_PROPRIETARIO']."<BR>";	}	ocilogoff($conn);}?>

a funcao pesquisa a gente ta declarando no text..... para a consulta funcionar ela nao teria que estar dentro do select???