Como usar AJAX Auto Suggest V2.0
Categories: Recursos, Tutoriales - Tags: ajax, autosuggest
Yo personalmente las pocas veces que he implementado un Auto Suggest o caja de sugerencias en mis proyectos he utilizado AJAX Auto Suggest V2.0. No es que haya probado muchos , pero en su día este fue el que más me convencio por su facilidad de uso y de personalización.
Para utilizarlo primero debemos incluir sus archivos:
1 2 3 | <link type="text/css" rel="stylesheet" href="autosuggest_inquisitor.css"> <script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script> |
Crear un campo de texto y asignarle un Id:
1 2 |
<input type="text" style="width: 200px; color: rgb(204, 204, 204);" id="materiales_input" name="materiales" autocomplete="off"> |
Luego definimos algunas opciones y creamos el objeto autosuggest:
1 2 3 4 5 6 7 8 9 10 11 | function autosuggest(){ var options = { script: "get_materiales.php?limit=6&",//página la cual recibirá la llamada AJAX varname: "materiales",// nombre de la variable que contendra el valor escrito json:false,//Podemos elegir JSON o XML maxresults:10,//Un máximo de resulados para mostrar timeout:9999,//numero en milisegundos antes de que se cierre la lista de valores sugeridos noresults:'Ingresar nuevo material a la base de datos' //valor que muestra en caso de no encontrar resultados }; var as = new bsn.AutoSuggest('materiales_input', options); //creamos el objeto AutoSuggest } |
Para más opciones consultar la página del autor.
Llamamos a la función cuando cargue la página:
1 | <body onload="autosuggest();"> |
Por último creamos un archivo PHP que devuelva los resultados de búsqueda(en este caso XML) para que se muestren en las sugerencias.
get_materiales.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <? 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 include_once('config/db.php'); $conn=get_db_conn(); $input=utf8_decode(cleanQuery($_GET['materiales'])); $query='SELECT * FROM categoria_materiales WHERE nombreMaterial LIKE \'%'.$input.'%\''; $materiales=mysql_query($query,$conn); if (isset($_REQUEST['json'])) { header("Content-Type: application/json" ); echo "{\"results\": ["; $arr = array(); while ($row=mysql_fetch_assoc($materiales)) { $arr[] = "{\"id\": \"".$row['idCatMaterial']."\", \"value\": \"".$row['nombreMaterial']."\", \"info\": \"\"}"; } echo implode(", ", $arr); echo "]}"; } else { header("Content-Type: text/xml"); echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?><results>"; while ($row=mysql_fetch_assoc($materiales)) { echo "<rs id=\"".$row['idCatMaterial']."\" info=\"\">".$row['nombreMaterial']."</rs>"; } echo "</results>"; } ?> |
Explicando get_materiales.php:
- Para empezar nos encontramos con las cabezeras que sirven para el nuestro navegador no guarde en cache los resultados.
- db.php, get_db_conn() y cleanQuery son explicados en mi blog en DB.php : Como definir los parametros de conexión de tu base de datos.
- utf8_decode lo utilizo porque en mi caso yo envio el formulario por AJAX y por lo tanto el campo de texto que se manda a get_materiales lo tengo codificado en UTF-8 como explico en Acentos y caracteres especiales con Ajax y JQuery.
- Para terminar tan solo queda devolver el resultado en el formato correcto.
Formato XML:
1 2 3 4 5 | <results> <rs id="1" info="Cheshire">Foobar</rs> <rs id="2" info="">Foobarfly</rs> <rs id="3" info="">Foobarnacle</rs> </results> |
Formato JSON:
1 2 3 4 5 | { results: [ { id: "1", value: "Foobar", info: "Cheshire" }, { id: "2", value: "Foobarfly", info: "" }, { id: "3", value: "Foobarnacle", info: "Essex" } ] } |
Como anotacíon en mi caso al enviar el formulario compruebo si el material ingresado existe en la base de datos y sino existe lo agrego. Por ese motivo en noresults muestro el mensaje de “Añadir a la base de datos”.Para ello hago lo siguiente:
1 2 3 4 5 6 7 8 9 10 | <? include_once('db.php'); $conn=get_db_conn(); if($_POST['materiales']!=''){ $material=cleanQuery($_POST['materiales']); $existe=mysql_query("SELECT * FROM materiales WHERE nombreMaterial ='$material'",$conn); if (mysql_num_rows($existe) == 0) mysql_query("INSERT INTO materiales (nombreMaterial) VALUES ('$material')",$conn); } ?> |
Con todo esto tendriamos el autosuggest o caja de sugerencias funcionando a la perfección.
Pueden ver un EJEMPLO FUNCIONANDO
O tambien DESCARGARSE EL CÓDIGO
Un saludo a todos, espero sus comentarios!
