Autocompletar text desde BD

[Hildegaard]

Bueno,. comienzo la explicacion. Antes que nada te comento que para el ejemplo usaremos la libreria prototype de javascript, con la cual haremos las llamadas ajax a 'script.php' y con la cual tambien mostraremos los resultados obtenidos en la caja de texto 'destino'. Todos los codigos de este ejemplo fueron hechos directamente sobre el editor de post, por lo que puede que necesites cambiar algunas cosas aqui o alli... pero esa es la forma de aprender, cierto ? :)

Algo que debes entendes de prototype es que usaremos la funcion $() del mismo. Esta funcion nos permite utilizar diferentes propiedades de elementos DOM de tu documento. Por ejemplo, si tenemos un <input id="destino" name="destino">, podremos hacer:

$('destino').value = 'nuevo contenido de la caja';

Todo via javascript y utilizando los 'id' para identificarlos.


Entonces, manos a la obra.



Antes que nada deberemos crear las dos cajas de texto, a una le pondremos de nombre e id 'caja1' y a la otra 'caja2'. Tambien le agregaremos a la caja uno un evento 'onchange', lo cual llamara a nuestra funcion javascript (la que se ocupara de conseguir los resultados). Por lo tanto quedaria:

<input type="text" name="caja1" id="caja1" onchange="conseguirResultados();">
<input type="text" name="caja2" id="caja2">


Luego crearemos nuestra funcion javascript 'conseguirResultados()'...

<script language="javascript">
function conseguirResultados() {
contenido = encodeURIComponent($('caja1').value);
var peticion = new Ajax.Request( 'script.php', { method: 'post', parameters: 'cont='+contenido, onComplete: mostrar_respuesta } );
}
</script>

La ultima linea lo que hace es crear un nuevo objeto ajax y mandar un request por method="post" al script 'script.php'. La respuesta ira parar a la funcion javascript 'mostrar_respuesta()'. Entonces lo que debemos hacer es crear dicha funcion y la ponemos seguida a nuestra funcion 'conseguirResultados()'. El contenido de esta respuesta lo mostraremos en la 'caja2'

function mostrar_respuesta(respuesta) {
$('caja2').value = respuesta.responseText;
}


Lo ultimo que nos faltaria hacer entonces el el script 'script.php' y su funcionamiento. Esto es un simple script mysql que busca en una columna, obteniendo los resultados de la otra.


<?php
# codigo de conexion al a base de datos, te lo dejo a ti

$query = "SELECT columna2 FROM tabla WHERE columna1 = '%".addslashes($_POST['cont'])."%'";
$resultado_sql = mysql_fetch_array(mysql_query($query));

#ahora devolvemos el valor que nos tiro la query,. en caso de que lo haya devuelto. Si tira error, en la Caja2 veremos el error, por lo que deberemos hacer todo el manejo de errores en php. Eso te lo dejo a ti :P

echo $resultado_sql[0];
?>


El simbolo % delante de $_POST['cont'] significa que nuestra query buscara cualquier texto que nosotros escribamos en la caja1, en cualquier posicion que se nos ocurra... por ejemplo. En vez de buscar 'valor' especificamente, buscara '*valor*'




Bueno, espero que mi mini-tutorial te haya servido,. no soy muy bueno escribiendo pero me parece que deberias tener una idea despues de esto.

Saludos
Bruno