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ñ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ó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>0 || id)
{
document.getElementById(idContenido).style.display="block";
//bucle para recorrer todos los elementos del xml
for(var i=0; i < NumberElements.length; i++)
{
//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!