Autocompletar con Jquery

#1 (**permalink**) 24/11/2010, 09:49

Un abrazo desde Colombia para todos!,
estoy empezando con jquery, especificamente tratando de autocompletar desde la base de datos, utilizo el siguiente código pero no funciona, quisiera saber si alguien identifica mi error o si debo tomar otro camino para lograr mi objetivo.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.6.custom.css" />
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               
               $('#pro').autocomplete("ajax.php", {
                         width : 280,
                         selectFirst : true
                });
             });
        </script>
    
    <title>Prueba Jquery</title>
</head>

<body>

    <form id="form1" name="form1" method="post" action="">
    
      <input type="text" name="pro" id="pro" />
    
    </form>	

</body>

</html>

Código PHP:

  <?

 
$db = mysql_connect("localhost","root","root");

$banco = mysql_select_db("factur",$db);

 
 $q = strtolower ($_POST['pro']);

 

 $sql = mysql_query("SELECT * FROM producto WHERE despro LIKE '%$q%'");

 
 

 while ($row = mysql_fetch_array($sql)){

      if(strpos(strtolower(row['despro']), $q) !== false ){

         echo $row["despro"] . "," . $row["despro"] . "\n";

         }

 }

 

?>

Atento a sus valiosos aportes!

maykol_mtz1906 · #2 (**permalink**) 24/11/2010, 11:19

Hola que tal, mira yo utilice este procedimiento para mejorar la rapidez de la busqueda, ya que al cargar los datos en en un arreglo para el javascript, solo se llegan a cargar una vez(la primera al cargar la pagina), y no como lo harias directamente de la Base de Datos ya que tardarian siempre lo mismo en tener que ir a consultar la Base y regresar el result para formar el arreglo de palabras que quieres que se muestre, bueno te muestro.

Primero haces tu consulta en de la Base de Datos de todos los registros que quieres en la busqueda
<?php
//.... aqui va el conector de tu Base de Datos y las demas variables que necesites

$lista_total_productos = mysql_query("SELECT * FROM producto);
$data = "";
$contador_total_registro = count($lista_total_productos);
$cont = 1;
while( $registro_producto = mysql_fetch_array($lista_total_productos) ){
$data .= $registro_producto['despro'];
if($cont != $contador_total_registro){//Si el contador de registro no es igual a la longitud del arreglo entonces agrega el simbolo, que es el delimitador que usara la funcion del jquery para distinguir una cadena de otra.
$data .="&";
}
$cont++;
}
//...... lo demas que necesites poner
?>

<script type="text/javascript">
$(document).ready(function() {
var data = '<?=$data?>'.split("&");//le asigna a la variable data(la del script) la cadena que se genero en la variable $data(la de php), y le dice que el delimitador para las cadenas de busqueda es '&', y ya con eso te hace la busqueda con la letra que vayas ingresando en el input
$("#pro").autocomplete(data);
});
<script>

//..... aqui va el formulario que necesitas poner.

Espero no haberte confundido un poco

caricatos · #3 (**permalink**) 24/11/2010, 12:13

Tema movido desde javascript

#4 (**permalink**) 24/11/2010, 15:18

Primero que todo excusas al moderador por haber consultado en el foro equivocado ........... a Mycol_mtz1906 muchas gracias, ahora mismo empiezo a probarlo y te cuento como me fué ............

#5 (**permalink**) 24/11/2010, 16:57

Hasta ahora no me funciona, el código quedó así:

Código PHP:

  <?

 
$db = mysql_connect("localhost","root","root");

$banco = mysql_select_db("factur",$db);

 
 $q = strtolower ($_POST['pro']); 

 
 
$lista_total_productos = mysql_query("SELECT * FROM producto WHERE despro '%$q%'"); 

$data = "";

$contador_total_registro = count($lista_total_productos);

$cont = 1;

while( $registro_producto = mysql_fetch_array($lista_total_productos) ){

$data .= $registro_producto['despro'];

if($cont != $contador_total_registro){//Si el contador de registro no es igual a la longitud del arreglo entonces agrega el simbolo, que es el delimitador que usara la funcion del jquery para distinguir una cadena de otra.

$data .="&";

}

$cont++;

}

 

?>

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.6.custom.css" />
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript">
			$(document).ready(function() {
			var data = '<?=$data?>'.split("&");
			$("#pro").autocomplete(data);
			});
		</script>
    
    <title>Prueba Jquery</title>
</head>

<body>

    <form id="form1" name="form1" method="post" action="">
    
      <input type="text" name="pro" id="pro" />
    
    </form>	

</body>
</html>

Atento a las sugerencias .......

#6 (**permalink**) 24/11/2010, 18:59

He modificado el código pero nada .......

ajax.php

Código PHP:

  <?

 
$db = mysql_connect("localhost","root","root");

$banco = mysql_select_db("factur",$db);

 
$lista_total_productos = mysql_query("SELECT * FROM producto");  

$data = ""; 

$contador_total_registro = count($lista_total_productos); 

$cont = 1; 

while( $registro_producto = mysql_fetch_array($lista_total_productos) ){ 

$data .= $registro_producto['despro']; 

if($cont != $contador_total_registro){//Si el contador de registro no es igual a la longitud del arreglo entonces agrega el simbolo, que es el delimitador que usara la funcion del jquery para distinguir una cadena de otra. 

$data .="&"; 

} 

$cont++; 

}  

 

?>

index.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.6.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
   <? include("ajax.php"); ?>
      $(document).ready(function() {
			var data = '<?=$data?>'.split("&");
			$("#pro").autocomplete(data);
			});
</script>

<title>Prueba Jquery</title>
</head>

  <body>

    <form id="form1" name="form1" method="post" action="">

      <input type="text" name="pro" id="pro" />
  
    </form>

 </body>
</html>