bueno despues de tanto pedir ayuda por aqui este sera mi primir aporte jejeje aun que soy relativamente un novato usando ajax despues de revisar infinidad de códigos para hacer un suggest box [los cuales no entendi ninguno ] pues empece a realizar uno de tal forma que yo lo entendiera y pues a mi parecer esta bastante sencillo a comparación de todos los que hay por la red en fin aquí les dejo mi código espero les sirva
primero el codigo del formulario
Código PHP:
<script language="javascript" src="../../js/suggest.js"></script>
<style type="text/css" media="screen">
.suggest_link {
background-color:#000000;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#mostrar_resultados {
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
font:Verdana, Arial, Helvetica, sans-serif;
}
</style>
<input type="text" id="txtBuscar" onkeyup="aver();" class="cuadrotexto" />
<div id="mostrar_resultados" style="display:none;"></div>
------------------
Código PHP:
function Ajax()
{
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E){
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
var ajaxObj=Ajax();
function aver()
{
document.getElementById('mostrar_resultados').innerHTML = "";
var texto = document.getElementById('txtBuscar').value;
if(texto == "")
{
document.getElementById('mostrar_resultados').style.display ='none';
document.getElementById('mostrar_resultados').innerHTML = "";
}
else
{
document.getElementById('mostrar_resultados').style.display ='block';
sugerencias('mostrar_resultados');
}
}
function sugerencias(control)
{
var contenedor;
var pagina = 'searchSuggest.php?buscar=';
var texto = document.getElementById('txtBuscar').value;
pagina = pagina + texto;
contenedor = document.getElementById(control);
ajaxObj=Ajax();
ajaxObj.open("GET",pagina,true);
ajaxObj.onreadystatechange=function(){
if(ajaxObj.readyState==4){
var cadena = ajaxObj.responseText.split("\n");
for(i=0;i<cadena.length-1; i++)
{
var nDiv = '<div onmouseover="javscript:rata_encima(this)"';
nDiv += 'onmouseout="javascript:suggestOut(this);" ';
nDiv += 'onclick="javascript:setSearch(this.innerHTML);" ';
nDiv += 'class="suggest_link">' + cadena[i] + '</div>';
contenedor.innerHTML += nDiv;
}
//contenedor.innerHTML = ajaxObj.responseText;
}
}
ajaxObj.send(null);
}
function rata_encima(div_value) {
div_value.className = 'suggest_link_over';//Clase definidas en el css
}
function rata_afuera(div_value) {
div_value.className = 'suggest_link';//Clase definida en el css
}
function setSearch(value) {
document.getElementById('txtBuscar').value = value;
document.getElementById('mostrar_resultados').innerHTML = '';
document.getElementById('mostrar_resultados').style.display ='none';
}
Código PHP:
<?
include('../../bd/conexion.php');
$clase= new ses();
if(isset($_GET['buscar']) && $_GET['buscar'] !='')
{
$str = $_GET['buscar'];
$sql = "SELECT `sugerencias` FROM `suggests` WHERE `sugerencias` LIKE '$str%' ";
$r = $clase->Sqlqueryrs($sql);
while($row = mysql_fetch_array($r))
{
echo $row['sugerencias']."\n";
}
}
?>