[Resolvido] Aparecer Consultas Enquanto Digita

[Dee 0]

Galera.

Ja viram no Google neh, que enquanto você digita o que quer, aparece em baixo um monte de alternativa de escolha.

Como faz aquilo ?

[lucas.exe 0]

Usa se Ajax, JavaScript e também uma server-side que pegará as palavras disponiveis em um banco de dados ou outro lugar;

 

Depois coloco um exemplo.

[Dee 0]

Coloca agora mano!

owieowieowi

 

To loko pra saber féra!

[lucas.exe 0]

O código JavaScript:

l="length";
Ajax=new ajax();
function ajax(){
	this.scs=null;
	this.s=null;
	this.ld=null;
	var fl=[],fll=0,hr;
	try{
		hr=new XMLHttpRequest()
	}catch(e){
		try{
			hr=new ActiveXObject("Msxml2.XMLHTTP")
		}catch(e){
			try{
				hr=new ActiveXObject("Microsoft.XMLHTTP")
			}catch(e){
				alert("Atualize o seu navegador para ter todas as funcionalidades do site!")
			}
		}
	}
	this.o=function(mtd,url,as){
		fl.push({mtd:mtd,url:url,as:as,s:Ajax.s,scs:Ajax.scs,ld:Ajax.ld});
		Ajax.s=null;
		Ajax.scs=null;
		Ajax.ld=null;
		if(fl[l]==(fll+1)){
			function fil(){
				hr.open(fl[fll].mtd,fl[fll].url,fl[fll].as);
				if(fl[fll].mtd=="POST"){
					hr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					if(fl[fll].s!=null) hr.setRequestHeader("Content-length",fl[fll].s[l]);
				}
				hr.onreadystatechange=function(){
					if(hr.readyState==4&&hr.status==200){
						if(fl[fll].scs!=null) fl[fll].scs();
						fll++;
						if(fll<fl[l]) fil();
					}else{
						if(fl[fll].ld!=null) fl[fll].ld()
					}
				};
				hr.send(fl[fll].s)
			}
			fil()
		}
	};
	this.rpt=function(d){
		return eval("hr.response"+d)
	}
};
function mouseo(a){
	a.style.background="#ffc";
}
function mouseot(a){
	a.style.background="none";
}
function seleciona(d){
	if(d[l]>0){
		Ajax.scs=function(){
			$("mostra").innerHTML=Ajax.rpt("Text");
			$("mostra").style.display="block";
		}
		Ajax.ld=function(){
			$("mostra").style.display="none";
		}
		Ajax.o("GET","/test.php?frase="+d,true);
	}else{
		$("mostra").value="";
	}
}
function coloca(e){
	$("in_on").value=e;
	$("mostra").style.display="none";
}
function $(f){
	return document.getElementById(f);
}

O código PHP:

$frase=$_REQUEST["frase"];
mysql_connect("localhost","seu_usuario","sua_senha");
mysql_select_db("nome_do_banco");
$sql = "SELECT * FROM `tabela_de_sugestoes` WHERE frase like '$frase%' LIMIT 0,12";
$qry = mysql_query($sql);
$num = mysql_num_rows($qry);
while ($row = mysql_fetch_array($qry, MYSQL_ASSOC)) {
    echo "<li onclick=\"coloca('".utf8_encode($row["frase"])."')\" onmouseout=\"mouseot(this)\" onmouseover=\"mouseo(this)\">".utf8_encode($row["frase"])."</li>";
}
@mysql_close();

HTML:

<input type="text" onkeyup="seleciona(this.value)" id="in_on" value="" />
<div id="mostra" style="width:150px"></div>

o CSS:

/* edite do jeito que quizer */
li{
	list-style-type:none;
	cursor:pointer;
}

Basta criar um banco de dados, uma tabela, criar um campo com o nome "frase" modificar o codigo php e colocar todas as frases(ou palavra)

[Dee 0]

Vlwwww Mano!

Vou ler essa berequetefe ae...

Mas pelo jeito vai ser de serventia.

Resolvido!

[educatto 0]

Muito bom, parabéns