16May 2010 21 Comments */?>

Como usar AJAX Auto Suggest V2.0

Categorías: Recursos, Tutoriales - Tags: ,

AJAX Autosuggest v2

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:


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!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • XD Muchas gracias. eres el amo

    • No amigo gracias a vos por el otro comentario. Las prisas a veces juegan malas pasadas 😉

      • fernanda

         Hola Damian, me resulto super util tu aporte, el tema es que quisiera saber como implementar el evento onclick en las diferentes opciones del suggest….me podras dar un poco de luz? gracias !

  • 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

  • Pingback: Como crear tu propio Google Instant Search | Timersys()

  • 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!

  • jesuco

    funciona en wamserver no por q cuando le pongo asi <?php en ves de <? aparece error

  • jesuco

    mi msn aber si me ayudas

  • sebastian

    ppor q cuando lo implemento me sale ajax error 404 me gustaria que me ayudaras un poko gracias

  • Pepe

    Gracias por tu aporte. El compartir el conocimiento de esta forma es el inventazo!.

  • Wendy

    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

  • Wendy

    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