Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Autocompletar varios inputs (formulario) a traves del primero

Estas en el tema de Autocompletar varios inputs (formulario) a traves del primero en el foro de Frameworks JS en Foros del Web. Hola, ando quebrandome la cabeza tratando de resolver gracias a un codigo que obtuve en una pagina,. ¿ de como atraves de una lista de ...
  #1 (permalink)  
Antiguo 03/11/2009, 10:31
Avatar de camargo  
Fecha de Ingreso: abril-2002
Ubicación: Kerétaro, Méjiko
Mensajes: 1.045
Antigüedad: 22 años
Puntos: 2
Autocompletar varios inputs (formulario) a traves del primero

Hola, ando quebrandome la cabeza tratando de resolver gracias a un codigo que obtuve en una pagina,. ¿ de como atraves de una lista de "AUTOCOMPLETE" en el numero de PIEZA (el primer input) rellenare los demas campos del formulario automaticamente,?
Actualmente me rellena el segundo, pero quiero que me rellene el 3er input llamado "descripcion", les dejo todos mis codigos.


anadir_producto.php
Código PHP:
<script type="text/javascript" src="ajax.js"></script>

            A&ntilde;adir Categoria no existente</p>
            <p>No. de Pieza: 
              <label>
        <input name="numero" type="text" id="input" onkeyup="javascript:autocompletar('lista',this.value);" size="15" maxlength="255" />
              </label><p>
            <p>Descripci&oacute;n: 
              <label>
                <input name="descripcion" type="text" id="numberId" size="35" maxlength="255" />
              </label><span id="reloj"><img src='image.gif' border=0 /></span>
    <!-- div que mostrara la lista de coincidencias -->
    <div id="lista"></div>
            </p>
            <p>Aplicacion 
              <label>
                <input name="cantidad" type="text" id="cantidad" size="65" maxlength="255">
              </label>
            </p>
            <p> 



:::::::::::::::::::::::::::

ajax.js

Código PHP:
var Conexion=false// Variable que manipula la conexion.
var Servidor="consulta.php"// Determina la pagina donde buscar
var Palabra=""//Determina la ultima palabra buscada.

// funcion que realiza la conexion con el objeto XMLHTTP...
function Conectar()
{
if(
window.XMLHttpRequest)
Conexion=new XMLHttpRequest(); //mozilla
else if(window.ActiveXObject)
Conexion=new ActiveXObject("Microsoft.XMLHTTP"); //microsoft
}

function 
Contenido(idContenido)
{
/* readyState devuelve el estado de la conexion. puede valer:
* 0- No inicializado (Es el valor inicial de readyState)
* 1- Abierto (El método "open" ha tenido éxito)
* 2- Enviado (Se ha completado la solicitud pero ningun dato ha sido recibido todavía)
* 3- Recibiendo
* 4- Respuesta completa (Todos los datos han sido recibidos)
*/

// En espera del valor 4
if(Conexion.readyState!=4) return;
/* status: contiene un codigo enviado por el servidor
* 200-Completado con éxito
* 404-No se encontró URL
* 414-Los valores pasados por GET superan los 512
* statusText: contiene el texto del estado
*/
if(Conexion.status==200// Si conexion HTTP es buena !!!
{
//si recibimos algun valor a mostrar...
/* Modificamos el identificador idContenido con el valor recibido por la consulta
* Podemos recibir diferentes tipos de datos:
* responseText-Datos devueltos por el servidor en formato cadena
* responseXML-Datos devueltos por el servidor en forma de documento XML
*/
xml=Conexion.responseXML;

var 
NumberElements xml.getElementsByTagName('label');

var 
texto="";
//cogemos el valor del tag <id> del xml
var id=xml.getElementsByTagName('id')[0];
if( 
id //si tiene valor, lo mostramos
document.getElementById("numberId").value=id.childNodes[0].data;
else 
//si no tiene valor, lipiamos la casilla
document.getElementById("numberId").value="";

//si hay mas de un elemento...
if(NumberElements.length>|| id)
{
document.getElementById(idContenido).style.display="block";
//bucle para recorrer todos los elementos del xml
for(var i=0NumberElements.lengthi++)
{
//window.alert(xml.getElementsByTagName('label')[i].childNodes[0].data);
texto += "<a href=\"javascript:selectItem('"+idContenido+"','"+xml.getElementsByTagName('label')[i].childNodes[0].data+"')\">"+xml.getElementsByTagName('label')[i].childNodes[0].data+"</a>";
}
}else
document.getElementById(idContenido).style.display="none";
document.getElementById(idContenido).innerHTML=texto;
}else{
document.getElementById(idContenido).innerHTML=Conexion.status+"-"+Conexion.statusText;
}

// Deshabilitamos la visualización del reloj
document.getElementById("reloj").style.visibility="hidden";

Conexion=false;
}

function 
Solicitud(idContenido,Cadena)
{
// si no recibimos cadena, no hacemos nada.
// Cadena=la cadena a buscar en la base de datos
/* Si cadena es igual a Palabra, no se realiza la busqueda. Puede ser que pulsen la tecla tabulador,
* y no interesa que vuelva a verificar...*/
if(Cadena && Cadena!=Palabra)
{
// Si ya esta conectado, cancela la solicitud en espera de que termine
if(Conexion) return; // Previene uso repetido del boton.

// Realiza la conexion
Conectar();

// Si la conexion es correcta...
if(Conexion)
{
// Habilitamos la visualización del reloj
document.getElementById("reloj").style.visibility="visible";

// Esta variable, se utiliza para igualar con la cadena a buscar.
Palabra=Cadena;

/* Preparamos una conexion con el servidor:
* POST|GET - determina como se envian los datos al servidor
* true - No sincronizado. Ello significa que la página WEB no es interferida en su funcionamiento
* por la respuesta del servidor. El usuario puede continuar usando la página mientras el servidor
* retorna una respuesta que la actualizará, usualmente, en forma parcial.
* false - Sincronizado */
Conexion.open("POST",Servidor,true);

// Añade un par etiqueta/valor a la cabecera HTTP a enviar. Si no lo colocamos, no se pasan los parametros.
Conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// Cada vez que el estado de la conexión (readyState) cambie se ejecutara el contenido de esta "funcion()"
Conexion.onreadystatechange=function()
{
Contenido(idContenido);
}

date=new Date();
/* Realiza la solicitud al servidor. Puede enviar una cadena de caracteres, o un objeto del tipo XML
* Si no deseamos enviar ningun valor, enviariamos null */
Conexion.send("idContenido="+idContenido+"&word="+Cadena+"&"+date.getTime());
}else
document.getElementById(idContenido).innerHTML="No disponible";
}
}

// Funcion que inicia la busqueda.
// Tiene que recibir el identificador donde mostrar el listado, y la cadena a buscar
function autocompletar(idContenido,Cadena)
{
// Comprovamos que la longitud de la cadena sea superior o igual a 1 caracteres
if(Cadena.length>=1)
{
if(
Conexion!=false)
{
// Deshabilitamos la visualización del reloj
document.getElementById("reloj").style.visibility="hidden";
//si esta en medio de una conexion, la cancelamos
Conexion.abort();
Conexion=false;
}
Solicitud(idContenido,Cadena);
}else
document.getElementById(idContenido).style.display="none";
}

// Funcion que se ejecuta cuando seleccionamos un valor del desplegable
function selectItem(idContenido,value)
{
// Cuando pulsamos sobre el desplegable, colocamos el valor en el cuadro de texto
document.getElementById("input").value=value;
//volvemos a indicar que actualice el listado con el nuevo valor
autocompletar(idContenido,value);





:::::::::::::::::::::::::::::::::::::::
consulta.php

Código PHP:
<?php
// Fichero que realiza la consulta en la base de datos y devuelve los resultados
if(isset($_POST["word"]))
{
    
// Conectamos con la base de datos
    
$link=mysql_connect("localhost""usuario""clave");
    
mysql_select_db("base-de-datos"$link);

if(
$_POST["word"]{0}=="*")
        
$result=mysql_query("SELECT * FROM lista_piezas WHERE numero LIKE '%".substr($_POST["word"],1)."%' ORDER BY numero LIMIT 10",$link);
    else
        
$result=mysql_query("SELECT * FROM lista_piezas WHERE numero LIKE '".$_POST["word"]."%' ORDER BY numero LIMIT 10",$link);


//vamos a emitir en formato xml
    
header("Content-type: text/xml");
    echo 
'<?xml version="1.0" encoding="iso-8859-15" ?>';
echo 
"<content>";
$label.="<labels>";
while(
$row=mysql_fetch_array($result))
{
if(
strtoupper($_POST["word"])==strtoupper($row["numero"]))
echo 
"<id>".$row["descripcion"]."</id>"//unicamente enviamos el identificador si se tenemos la palabra exacta
else
$label.="\n<label>".$row["numero"]."</label>";
}
$label.="</labels>";
echo 
$label."</content>";
}

/* La estructura el xml es similar a esta:
<?xml version="1.0" encoding="iso-8859-15" ?>
<content>
<id></id>
<labels>
<label>palabras</label>
<label>palabras</label>
<label>palabras</label>
<label>palabras</label>
<label>palabras</label>
</labels>
</content>
*/
?>
Image.gif





Esta bastante bueno el codigo,
para los q no me entendieron

Esto es un agregador de piezas, pero hay algunas que ya estan en una base de datos almacenadas, las identifico con el numero de pieza me despliega una lista "autocompletar" y de ahi se me rellena el siguiente campo del formulario automaticamente con el valor de la base de datos (descripcion) pero quiero que me llene tambien el 3er campo llamado (cantidad) y no logro hacerlo

Ojala m puedan ayudar!
Saludos!
__________________
http://www.chorcha.com
  #2 (permalink)  
Antiguo 03/11/2009, 16:33
Avatar de webness  
Fecha de Ingreso: enero-2009
Ubicación: BOGOTA
Mensajes: 312
Antigüedad: 15 años, 3 meses
Puntos: 5
Respuesta: Autocompletar varios inputs (formulario) a traves del primero

Porque no miras en el documento php despues de que tienes el resultado del query con las descripciones y las cantidades respectivamente yo haria algo mas o menos asi:

Código PHP:
     $htmlDesc "";
     
$htmlCant "";
     while(
$row=mysql_fetch_array($result)) 
     {
        
$htmlDesc .= "<a href=javascript:selectItem(".$row["id"].",' ".$row["descripcion"]." ')>".$row["descripcion"]."</a>";     

        
        
$htmlDesc .= "<a href=javascript:selectItem(".$row["id"].",' ".$row["numero"]." ')>".$row["numero"]."</a>"
     }
     echo 
$htmlDesc."[block]".$htmlCant
de este modo estariamos retornando al responseText no al resposeXML algo como esto:

html de descripciones[block]html de cantidades

ahora en el js haces esto:

Código JS:
Ver original
  1. var arreglo = ajax.responseText.split("[block]);

ESTO devuelve un arreglo del siguiente modo:

arreglo[0]= html de descripciones
arreglo[1]= html de cantidades

para finalizar haces esto

document.getElementById("div_descripciones").inner HTML = arreglo[0];
document.getElementById("div_cantidades").innerHTM L = arreglo[1];
  #3 (permalink)  
Antiguo 04/11/2009, 09:33
Avatar de camargo  
Fecha de Ingreso: abril-2002
Ubicación: Kerétaro, Méjiko
Mensajes: 1.045
Antigüedad: 22 años
Puntos: 2
Respuesta: Autocompletar varios inputs (formulario) a traves del primero

Pero esto que hiciste es para que me despliegue la descripcion o cantidad dentro del mismo list de autocomplete no?

yo lo que quiero es que ademas que me autcomplete el formulario en si, me llena el primer campo pero no el segundo.
__________________
http://www.chorcha.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:58.