Como usar AJAX Auto Suggest V2.0
Publicado en May 16, 2010 by Damian
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:
<script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script>
Crear un campo de texto y asignarle un Id:
Luego definimos algunas opciones y creamos el objeto 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:
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:
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:
<rs id="1" info="Cheshire">Foobar</rs>
<rs id="2" info="">Foobarfly</rs>
<rs id="3" info="">Foobarnacle</rs>
</results>
Formato JSON:
{ 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:
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!
Links Sponsors
Tags: ajax, autosuggest
Categoría: Recursos, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.
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