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!
XD Muchas gracias. eres el amo
No amigo gracias a vos por el otro comentario. Las prisas a veces juegan malas pasadas
sabes como podría meter otra variable??
mira toy rellenando inputs automaticamente según lo elegido.. pongo el código por si alguien quiere hacerlo:
function autosuggest(){
var options = {
script: "get_materiales.php?limit=6&",
varname: "materiales",
json:false,
maxresults:10,
timeout:9999999,
noresults:'Ingresar nuevo material a la base de datos',
callback: function (obj) {
document.getElementById('precio1').value = obj.pvp;
document.getElementById('iva').value = obj.iva;
}
};
var options_xml = {
script: function (input) { return "get_materiales.php?input="+input+"&precio1="+document.getElementById('precio1').value; },
varname:"precio"
};
var as3 = new bsn.AutoSuggest('materiales1', options);
var as_xml = new bsn.AutoSuggest('precio1', options_xml);
var as_xml = new bsn.AutoSuggest('iva1', options_xml);
}
y estos serian los input del formulario:
como consulta estoy usando la misma de tu código de arriba lo único que cambio es meter un poco de texto mas en el echo llamado pvp para saber el precio de ese articulo.
echo "".$row['descripcion']."";
total que me dice que no que indefinido el caso es que si en vez de pvp uso info si funciona.
por el tema de la variable de iva no le hagais ningún caso que esta a medio la que si esta supuestamente terminada es la de pvp
solucionado.
en bsn.AutoSuggest_2.1.3.js en la linea 332 ( por que estoy usando xml ) añado la variable que quiero en este caso pvp obteniendo el dato de pvp
this.aSug.push( { 'id':results[i].getAttribute('id'), 'value':results[i].childNodes[0].nodeValue, 'info':results[i].getAttribute('info'), 'pvp':results[i].getAttribute('pvp') } );
es de una forma muy sucia a ver si a ti se te ocurre algo mas limpio o que no obligue a modificar ese archivo.
ahora si consigo hacer que calcule el total de la linea dinamicamente y luego el total de todas las lineas ya soy el rey
la demo del codigo funcionando esta aqui:
http://www.factusyn.es/Scripts/Archivos/Demos/Factusyn5/...
podeis buscar co o nex o sill un puñao de cosas
a ver si me puedes guiar donde poner +newID que para variar en la segunda linea del formulario dinamico ya no funciona
ahora estoy en jquery.addfield.js
//adding autosugges property
var options = {
script: "get_materiales.php?limit=6&",
varname: "materiales",
json:false,
maxresults:10,
timeout:9999999,
noresults:'Ingresar nuevo material a la base de datos',
callback: function (obj) {
document.getElementById('precio'+newID).value = obj.pvp;
document.getElementById('iva'+newID).value = obj.iva;
}
};
var precio = {
script: function (input) { return "get_materiales.php?input="+input+"&precio="+document.getElementById('precio'+newID).value; },
varname:"precio"
};
var impuestos = {
script: function (input) { return "get_materiales.php?input="+input+"&iva="+document.getElementById('iva'+newID).value; },
varname:"iva"
};
var as3 = new bsn.AutoSuggest('materiales'+newID, options);
var precio = new bsn.AutoSuggest('precio'+newID, precio);
var impuestos = new bsn.AutoSuggest('iva'+newID, impuestos);
}
Tu error es que repites los id´s.
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id",'materiales'+newID).val('');
Si estas usando esa función tendrias que hacer lo mismo para el campo iva y precio.
genial.
ahora voy a pelearme con la suma
hay un fallo en el codigo que puse arriba. aparte que ahora lo tengo un poco mas limpio:
var options = {
script: "get_materiales.php?limit=6&",
varname: "materiales",
json:false,
maxresults:10,
timeout:9999999,
noresults:'Ingresar nuevo material a la base de datos',
callback: function (obj) {
document.getElementById('precio1').value = obj.pvp;
document.getElementById('iva1').value = obj.iva;
document.getElementById('codigo1').value = obj.cod;
}
};
var masop = {
script: function (input) {
return "get_materiales.php?input="+input+"&precio1="+document.getElementById('precio1').value;
return "get_materiales.php?input="+input+"&codigo1="+document.getElementById('codigo1').value;
return "get_materiales.php?input="+input+"&iva1="+document.getElementById('iva1').value;
},
varname:"masop"
};
var as3 = new bsn.AutoSuggest('materiales1', options);
}
si os fijais al final antes metia un autosuggest para impuestos, precio etc etc:
var as3 = new bsn.AutoSuggest(‘materiales’+newID, options);
var precio = new bsn.AutoSuggest(‘precio’+newID, precio);
var impuestos = new bsn.AutoSuggest(‘iva’+newID, impuestos);
si hacemos esto al escribir algo en ese campo nos saldrá el autosuggest. y yo por lo menos no es lo que quería. asi que esas 2 lineas fuera y solo dejo la de var as3……
también están unidos los auto rellenados de inputs y definidos con otro nombre ( posiblemente esto se podria quedar mas limpio pero para ser el primero que hago ta monisimo ). así es como estaba:
var precio = {
script: function (input) { return “get_materiales.php?input=”+input+”&precio=”+document.getElementById(‘precio’+newID).value; },
varname:”precio”
};
var impuestos = {
script: function (input) { return “get_materiales.php?input=”+input+”&iva=”+document.getElementById(‘iva’+newID).value; },
varname:”iva”
};
y asi como queda:
var masop = {
script: function (input) {
return "get_materiales.php?input="+input+"&precio1="+document.getElementById('precio1').value;
return "get_materiales.php?input="+input+"&codigo1="+document.getElementById('codigo1').value;
return "get_materiales.php?input="+input+"&iva1="+document.getElementById('iva1').value;
},
varname:"masop"
};
ala espero que a alguien le sirva para algo
[...] primero que pense fue en utilizar Ajax autosuggest + un buscador por relevancia pero antes de empezar a mirar me acorde de que Google ofrece su propio [...]
Muchas gracias por compartir esta información.
Había estado buscando algo similar y no lo encontraba, lo ajustare a mis necesidades para ver como funciona.
Me gusto mucho tu blog, creo que me convertire en un fiel seguidor.
Saludos y muchas gracias por compartir.
Gracias por tu comentario Carlos, nos estaremos viendo por acá. Saludos!
funciona en wamserver no por q cuando le pongo asi <?php en ves de <? aparece error
mi msn aber si me ayudas
ppor q cuando lo implemento me sale ajax error 404 me gustaria que me ayudaras un poko gracias
Gracias por tu aporte. El compartir el conocimiento de esta forma es el inventazo!.
Gracias por tan buen aporte, pero aun tengo errores despues de haberlo revisado muchas veces. Notice: Undefined index: materiales in ..index.php on line 28 , solo cambie el nombre de la BD y los campos de la tabla, es la linea que dice if($_POST['materiales']!='') la primera vez que carga la pagina es como sino encuentra esta variable como podria hacer para evitar ese error. Gracias
hola, ya tengo todo funcionando solo una pregunta. Como podria hacer para obtener el ID del material encontrado? quiero decir, que cuando en el input me muestre el material encontrado, tambien pueda obtener el Id de la tabla en donde esta almacenado. Yo puedo ver el id modificando el formato XML pero en el formulario como lo obtengo? muchas gracias