Autocompletar text desde BD

[Adema]

Planteo al asunto:

Teniendo:
Campodetexto1 Campodetexto2

Quiero que al rellenar con "X" caracteres el primer campo, busque esa cadena en un campo de una base de datos y rellene automáticamente el segundo campo con el valor de otro campo.

Pongo un ejemplo para que sea más claro:

Tengo una base de datos con una tabla y dos campos (campo1 y campo2)
Hay dos registros: prueba1 | 1 y prueba2 | 2

Tengo una web con dos campos de texto:
Introduzco en uno de ellos "prueba1" y me completa el otro con "1". Y lo mismo para "prueba2", me lo completa con "2"


En definitiva eso es lo que quiero. Espero haberme explicado bien.

[Hildegaard]

Lo que estas queriendo hacer requiere ajax. En este momento me estoy yendo a la facultad, pero en cuanto regrese pondre un ejemplo para ti.

Mientras tanto busca 'ajax with prototype' en google y tendras una idea mejor.

[Adema]

Muchas gracias, parece que sí es lo que necesito.

Yo he acabado mi horario de trabajo, así que mañana leeré tu ejemplo :)

Muchas gracias y perdona las molestias

[Koden]

Prueba a buscar scripts de autocompletado en AJAX.

Quizás se ajusten a lo que estás buscando.


Suerte y un saludo.

[GatorV]

Tema trasladado desde PHP

[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

[Adema]

Muchiiiiísimas gracias.

Con gente así de dispuesta a ayudar la programación es menos engorro.

El código me ha servido perfectamente, aunque he cambiado totalmente la última parte, porque me obligan a usar Access, así que he tenido que rehacer todo. Además, no necesitaba un vector, ya que sólo hay un posible resultado para la sentencia.

Lo dicho, muchas gracias y disculpa las molestias :)

[Hildegaard]

No es molestia, me alegro que te haya servido.

Saludos
Bruno

[Adema]

:)

Problemas a la vista... :(

¿Funciona prototype con IE 6?

No hay forma de hacerlo funcionar, me dice "El objeto no acepta esta propiedad o método". Sin embargo, en Firefox, que es el otro navegador que he probado, sí funciona correctamente.
El problema es que necesito optimizarlo para IE 6 (sí, a estas alturas, ese navegador y esa versión... hay empresas ahí :P)

Gracias ;)

[Hildegaard]

Si, prototype soporta IE6. Justamente la idea principal de Prototype (junto a muchos otros frameworks de JS) es hacer una libreria cuyo codigo funcione en todos los exploradores por igual.


Al igual que ayer, me estoy yendo a la facultad ahora asi que no puedo ayudarte con esto. Busca en que linea del codigo te esta tirando ese error y tratare de ayudarte hoy a la tarde.

Saludos
Bruno

[Adema]

El problema es:

contenido = encodeURIComponent($('caja1').value);

Y esta vez, lo pienso resolver yo!! :P

Bien, pues ayer ya lo había solucionado, pero no tuve tiempo de comentarlo por aquí.

La solución para que funcionase en IE6 (y en el 7, que tampoco funcionaba) es declarar la variable que contiene el valor de la caja. Es decir, declarar "contenido".

Nada más, por ahora... :P