Foros del Web - Ver Mensaje Individual

vgonga1986 · #22 (**permalink**) 09/08/2011, 05:56

A ver, en primer lugar, descarga los ficheros de la librería de aquí.

Descomprímelo en el sitio donde lo quieras usar (ten en cuenta que esto va a definir más valores de aquí en adelante). Te pongo el ejemplo de mi carpeta para que lo veas bien (te pongo sólo los que se usan):

Código:

/ (raiz)
  - test.php
  - get_titles.php
  / AutoSuggest (esta es la carpeta que sale de descomprimir, pero la renombré, para simplicidad)
    - (varios ficheros)
    / css
      - autosuggest_inquisitor.css
      - (varios ficheros y carpetas más)
    / js
      - bsn.AutoSuggest_2.1.3.js
      - (varios ficheros y carpetas más)

Aquí tienes el código de test.php (te pongo comentarios, para que sepas qué es cada cosa, léetelos):

Código HTML:

Ver original<!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>
    <title>Autosuggest con AJAX v2.0</title>
    <script type="text/javascript" src="AutoSuggest/js/bsn.AutoSuggest_2.1.3.js"></script> <!-- en src tendrás que poner la ruta de tu sistema de carpetas, esto está ajustado para la mía -->
    <link type="text/css" rel="stylesheet" href="AutoSuggest/css/autosuggest_inquisitor.css"> <!-- en href tendrás que poner la ruta de tu sistema de carpetas, esto está ajustado para la mía -->
    <script type="text/javascript">
        function autosuggest(){
            var options = {
                script: "get_titles.php?limit=6&", // Aquí tienes que poner el nombre de tu php que genera el xml, en mi caso get_titles. Lo demás tienes que dejarlo igual, luego verás por qué.
                varname: "title", // name del input del form que va a tener el autosuggest.
                json: false, // aquí pon siempre false, ya mirarás con json si quires en un futuro.
                timeout: 9999,
                noresults: '-- Sin sugerencia --'
            };
            var as = new bsn.AutoSuggest('title_input',  options); // aquí tendrás que poner el id del input del form que va a tener el autosuggest, en mi caso 'title_input'
        }
    </script>
</head>
<body onload="autosuggest();"> <!-- Se inicia el javascript aquí -->
    <form action="<? echo $_SERVER['PHP_SELF'];?>" method="post" id="formulario" name="form" >
        <input type="text" id="title_input" name="title" autocomplete="on"> <!-- Este es el input que tendrás que usar, con el id que pusiste arriba y el name que pusiste arriba. Cuando te lo lleves a tu form real, este input es el más importante, imprescindible -->
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

Y este es el código de mi get_titles.php, que tendrás que adaptar a tus necesidades. Te pongo también comentarios:

Código PHP:

Ver original<?
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Fecha del pasado 
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // siempre modificado
header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header ("Pragma: no-cache"); // HTTP/1.0
 
// Primero se extraen los valores del campo y de limit. Yo pongo title porque el name de mi input en test.php es title, tú adáptalo a lo que necesites.
$input = strtolower($_GET['title']);
$limit = $_GET['limit'];
 
// Esta es sólo la consulta a la base de datos. Tienes que adaptarla a como funcione en tu código. Falta la conexión y el mysql_execute, añádelos tú.
$qry = "SELECT * FROM Tabla WHERE title LIKE '%" . $input . "%' LIMIT 1, " . $limit;
 
// Ponemos en la cabecera que el resultado será XML.
header("Content-Type: text/xml");
 
// Imprimimos la primera línea
echo '<?xml version="1.0" encoding="ISO-8859-1" ?><results>';
// Para cada fetch del resultado, imprimimos el tag xml correspondiente
while ($row = mysql_fetch_assoc($titles)) {
    // Esta línea dependerá de tu tabla, saca los campos que quieras, en mi caso son id y title.
    echo '<rs id="' . $row['id'] . '" info="">' . $row['title'] . '</rs>';
}
echo '</results>';
?>

Para comprobar que tu fichero de generación del XML funciona bien, puedes poner en la url lo siguiente:
ruta_de_host/get_titles.php?limit=6&title=texto

Dónde lo que pongas en limit (6) será el límite de sugerencias que se mostrarán, title es el name de tu input en el formulario y texto es el texto que quieres que se busque. Esta llamada generará un XML con los resultados que se visualizará en tu navegador.

Y creo que ya está, prueba eso para una prueba sencillita, con alguna tabla de tu base de datos. Si te funciona, adáptalo al resto de tu código. Si tienes problemas, ponme por aquí, pero por favor, siempre poniendo código (estructura de carpetas y ficheros incluido) y siendo claro en la explicación, porque ya me estoy poniendo nervioso con este post.

Un saludo y suerte.