autocompletar

Beto Lima · Outubro 29, 2008

Quem puder ajudar nesta questão agradeço, pois da um erro quando abre a div onde deveriam mostrar as palavras...

busca_nome.php

<?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 cidades WHERE cidade like UPPER('$_GET[valor]%')";
	$resultado = mysql_query ($conn , $query);
	echo $_GET["valor"];


	while($linhas = mysql_fetch_array($resultado))
	{
		echo "<option value='".$linhas['cidade']."'>".$linhas['cidade']."</option>";
		
	}
}
?>

index.php

<html>
<head>
<title>BUSCA DINÂMICA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="script.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:250px;
}

#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>

conexao.php

<?php
  // dados
  $hostname_conn = "localhost";
  $database_conn = "banco";
  $username_conn = "root";
  $password_conn = "";
  $conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
?>

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);}

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.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 http://www.w3.org/Protocols/rfc2616/rfc261...c10.html";
		}
	}
	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: 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){
		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);
		}
	}
}

Valeu

micox · Outubro 29, 2008

Qual erro exibe?

Beto Lima · Outubro 29, 2008

esse é o erro

Imagem Postada

paulopatto · Outubro 29, 2008

Manda o texto da exception PHP/MySQL. Para que possamos entenderer.

Beto Lima · Outubro 29, 2008

onde pego isso?

William Bruno · Outubro 29, 2008

É oq tá escrito ai depois desse warning....

Beto Lima · Outubro 29, 2008

Warning: mysql_query(): supplied argument is not a valid MySQL-Link resource in busca_nome.php on line 8

micox · Outubro 30, 2008

Ae brodi, isso é erro de PHP e não de javascript ou de ajax.

Ou seja, deve ser movido pra área de PHP.

William Bruno · Outubro 30, 2008

Reveja essa query:

$query = "SELECT * FROM cidades WHERE cidade like UPPER('$_GET[valor]%')";
	$resultado = mysql_query ($conn , $query);

O correto é: mysql_query($query), ne!?

http://br.php.net/manual/pt_BR/function.mysql-query.php

Beto Lima · Outubro 30, 2008

Willian;

fiz assim como você disse: mysql_query($query)

tirei o $conn e ficou na mesma mostrando o mesmo erro

Cândido Areas · Janeiro 9, 2009

$termo = $_GET["valor"];

$query = "SELECT * FROM cidades WHERE cidade like UPPER('" + $termo + "%')";

rafael p lopes · Setembro 2, 2009

olaaa minha gente, to com uma duvida no autocomplete....ele funfa certinho co jquery...só que na hora de abri a lista com os resultado, tipo..se ter um text edit abaixo do qual ele esta completando, a lista "empurra" esse outro edit para baixo, mas depois volta ao normal, teria como fazer a lista sobrepor os demais campos do form?!!?!? tlvz seja na css num sei....o exemplo do que falo pod ser visto aqui: http://grandodistribuidora-com-br.pre-hw3.webservidor.net/index.html

quintelab · Setembro 2, 2009

rafael este tópico é de 2008. Da próxima vez crie seu tópico com sua dúvida.

Abraços...

Arquivado

autocompletar

Recommended Posts

Beto Lima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beto Lima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulopatto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beto Lima 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

Beto Lima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

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

Beto Lima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cândido Areas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafael p lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

quintelab 91

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante