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

autocompletar en campos dinamicos

Estas en el tema de autocompletar en campos dinamicos en el foro de Frameworks JS en Foros del Web. Hola Bueno tengo una pequeña pregunta, he buscado pero no se por que no funciona yo quiero crear un autocomplemento en campos dinamicos pero no ...
  #1 (permalink)  
Antiguo 03/10/2012, 08:42
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
autocompletar en campos dinamicos

Hola Bueno tengo una pequeña pregunta, he buscado pero no se por que no funciona yo quiero crear un autocomplemento en campos dinamicos pero no me funciona, pero se que esta bien la funcion por que si funciona valga la rebundancia pero con campos fijos

Ejemplo:

Aqui creo los campos dinamicos a los que quiero que se queden como autocomplemento

Código Javascript:
Ver original
  1. <script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */
  2.  
  3.     /* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */
  4.  
  5.     var posicionCampo=1;
  6.  
  7.     /* Declaramos la función agregarUsuario( ) */
  8.  
  9.     function agregarUsuario(){
  10.  
  11. /* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
  12.  
  13.     nuevaFila = document.getElementById("tabla").insertRow(-1);
  14.  
  15.     /* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
  16.     nuevaFila.id=posicionCampo;
  17.  
  18.     nuevaCelda=nuevaFila.insertCell(-1);
  19.  
  20.     nuevaCelda.innerHTML="<td><input type='text' id='Especifica'  name='Especificas["+posicionCampo+"]' value=''></td>";
  21.  
  22.     nuevaCelda=nuevaFila.insertCell(-1);
  23.  
  24.     nuevaCelda.innerHTML="<td> <input type='text' size='15'  name='Resultado["+posicionCampo+"]' ></td>";
  25.    
  26.     nuevaCelda=nuevaFila.insertCell(-1);
  27.  
  28.  
  29.  
  30.     nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
  31.     /*----------------------------------------------------------------------*/
  32.  
  33.    
  34.     /* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
  35.  
  36.     posicionCampo++;
  37.  
  38.     }
  39.  
  40.     /* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
  41.  
  42.     function eliminarUsuario(obj){
  43.  
  44.     var oTr = obj;
  45.  
  46.     while(oTr.nodeName.toLowerCase()!='tr'){
  47.  
  48.     oTr=oTr.parentNode;
  49.  
  50.     }
  51.  
  52.     var root = oTr.parentNode;
  53.  
  54.     root.removeChild(oTr);
  55.  
  56.     }
  57.  
  58.     /* Cerramos el código Javascript */
  59.  
  60.     </script>

Esta es la parte de la consulta y la lista desplegable en el campo fijo si funciona pero en el dinamico no

Código PHP:
Ver original
  1. <?php
  2. require('Conexion.php');
  3.  
  4. $con = "select distinct `resuktado` from `mediosexternos`";
  5. $query = mysql_query($con);
  6. ?>
  7.  
  8. <script>
  9.     $(function() {
  10.    
  11.     <?php
  12.  
  13.     while($row = mysql_fetch_array($query)) {
  14.  
  15.     $cliente[]= '"'.$row['resuktado'].'"';
  16.     }
  17.    
  18.  
  19.     $arreglo1= implode(", ", $cliente);
  20.  
  21.     ?>
  22.    
  23.     var availableTags1 = new Array(<?php echo $arreglo1; ?>);
  24.  
  25.  
  26.     $( "#Especifica" ).autocomplete({
  27.     source: availableTags1
  28.     });
  29.    
  30.     $( "#Resultado["+posicionCampo+"]" ).autocomplete({
  31.     source: availableTags1
  32.     });
  33.    
  34. /*------------------------------------------------------------*/    
  35.     });
  36.  </script>

este es el resto del formulario aqui es donde incluyo el campo fijo al cual si le funciona la lista desplegable

Código PHP:
Ver original
  1. <body>
  2.  
  3. <center>
  4. <input name="Agregar" type="button" value="Agregar" onClick="agregarUsuario()">
  5. </center>
  6.  
  7. <table width="60%" border="1" id="tabla">
  8.   <tr>
  9.     <th scope="row">Especificacion</th>
  10.     <th scope="row">Resultado <input type="text" name="Especifica" id="Especifica"></th>
  11.   </tr>
  12. </table>

agradesco toda la ayuda brindada :)
  #2 (permalink)  
Antiguo 03/10/2012, 10:18
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 12 años, 4 meses
Puntos: 220
Respuesta: autocompletar en campos dinamicos

Primero por definición debes comprender que solo debe existir un id por cada elemento del formulario y no como lo estas haciendo.

Mira como deberia quedar tu codigo para que funcione

Código Javascript:
Ver original
  1. function agregarUsuario(){
  2.  
  3. /* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
  4.  
  5.     nuevaFila = document.getElementById("tabla").insertRow(-1);
  6.  
  7.     /* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
  8.     nuevaFila.id=posicionCampo;
  9.  
  10.     nuevaCelda=nuevaFila.insertCell(-1);
  11.  
  12.     nuevaCelda.innerHTML="<td><input type='text' id='Especifica"+posicionCampo+"'  name='Especificas["+posicionCampo+"]' value=''></td>";
  13.  
  14.     nuevaCelda=nuevaFila.insertCell(-1);
  15.  
  16.     nuevaCelda.innerHTML="<td> <input type='text' size='15'  name='Resultado["+posicionCampo+"]' ></td>";
  17.    
  18.     nuevaCelda=nuevaFila.insertCell(-1);
  19.  
  20.  
  21.  
  22.     nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
  23.     /*----------------------------------------------------------------------*/
  24.    
  25.     $( "#Especifica" + posicionCampo).autocomplete({
  26.     source: availableTags1
  27.     });
  28.      
  29.     /* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
  30.    
  31.     posicionCampo++;
  32.    
  33.     }
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 03/10/2012, 10:44
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: autocompletar en campos dinamicos

no la verdad no entiendo reviso el codigo y veo el id en un campo dinamico, y otro id en el campo fijo son elementos diferentes dentro del formulario.

y le arregle lo que me puciste pero no funciona $( "#Especifica" + posicionCampo) y no funciona en el campo dinamico
solo coje en el fijo
  #4 (permalink)  
Antiguo 03/10/2012, 10:53
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 12 años, 4 meses
Puntos: 220
Respuesta: autocompletar en campos dinamicos

pero has agregado esto que esta al final

$( "#Especifica" + posicionCampo).autocomplete({
source: availableTags1
});
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 03/10/2012, 11:04
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: autocompletar en campos dinamicos

no funciona, Especifica es el id de mi campo fijo, y hay si funciona bein el auto complemento, en el campo dinamico con el id Resultado["+posicionCampo+"] es el que no me funciona!! Muestro codigo :)
  #6 (permalink)  
Antiguo 03/10/2012, 11:38
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 12 años, 4 meses
Puntos: 220
Respuesta: autocompletar en campos dinamicos

Me parece raro porque aca ya estas agregando los input

nuevaCelda.innerHTML="<td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas["+posicionCampo+"]' value=''></td>";

y por lo tanto deberia funcionar correctamente esto

$( "#Especifica" + posicionCampo).autocomplete({
source: availableTags1
});


En todo caso trata de ver que te sale usando el firebug o inspector de google chrome
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #7 (permalink)  
Antiguo 03/10/2012, 14:10
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: autocompletar en campos dinamicos

no funciona!!! ya lo revise!!
  #8 (permalink)  
Antiguo 03/10/2012, 14:58
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 12 años, 4 meses
Puntos: 220
Respuesta: autocompletar en campos dinamicos

Mira este ejemplo que hice y funciona perfectamente como te habia comentado antes

http://jsfiddle.net/ldiego/fMDqf/1/
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #9 (permalink)  
Antiguo 04/10/2012, 08:14
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: autocompletar en campos dinamicos

Hay no funciona!! ya lo he cambiado lo he areglado lo he puesto como tu lo tienes y nada!!! ayuda!!
  #10 (permalink)  
Antiguo 04/10/2012, 08:20
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 12 años, 4 meses
Puntos: 220
Respuesta: autocompletar en campos dinamicos

Pero puedes poner el codigo de como lo estas haciendo, segun las modificaciones que hize y por favor poner Hay no funciona!! o no funciona!!! ya lo revise!! deja que pensar que quieres que te resolvamos tus problemas te inmediato se paciente y respeta la ayuda que se te brinda en los foros

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #11 (permalink)  
Antiguo 04/10/2012, 08:36
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: autocompletar en campos dinamicos

Si doy gracias por toda ayuda, y tambien la respeto, se que tengo que tener paciencia. por eso busco ayuda de foros, toda la ayuda que me brindan a los problemas es buena, y funciona, siento no haber respetado la ayuda en algun momento.

Código PHP:
Ver original
  1. <script language="javascript" type="text/javascript">
  2.  
  3. <?php
  4. require('Conexion.php');
  5.  
  6. $con = "select distinct `resuktado` from `mediosexternos`";
  7. $query = mysql_query($con);
  8.  
  9. ?>
  10.  
  11. var posicionCampo=1;
  12.  
  13. function agregarUsuario(){
  14.  
  15. nuevaFila = document.getElementById("tabla").insertRow(-1);
  16.    
  17. nuevaFila.id=posicionCampo;
  18.  
  19. nuevaCelda=nuevaFila.insertCell(-1);
  20. nuevaCelda.innerHTML="<td><td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas[]' value=''></td>";
  21.  
  22. nuevaCelda=nuevaFila.insertCell(-1);
  23. nuevaCelda.innerHTML="<td> <input type='text' size='15'  id='Resultado["+posicionCampo+"]' name='Resultado["+posicionCampo+"]' ></td>";
  24.    
  25. nuevaCelda=nuevaFila.insertCell(-1);
  26.    
  27. $( "#Especifica" + posicionCampo).autocomplete({
  28. source: availableTags1
  29. }); ------------------------------>// No muestra la lista desplegable en el campo dinamico
  30.  
  31. nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
  32.    
  33. posicionCampo++;
  34.  
  35. }
  36.  
  37.     function eliminarUsuario(obj){
  38.  
  39.     var oTr = obj;
  40.  
  41.     while(oTr.nodeName.toLowerCase()!='tr'){
  42.  
  43.     oTr=oTr.parentNode;
  44.  
  45.     }
  46.  
  47.     var root = oTr.parentNode;
  48.  
  49.     root.removeChild(oTr);
  50.  
  51.     }
  52.  
  53.     $(function() {
  54.    
  55.     <?php
  56.  
  57.     while($row = mysql_fetch_array($query)) {
  58.  
  59.     $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
  60.     }
  61.    
  62.     $arreglo1= implode(", ", $cliente);
  63.  
  64.     ?>
  65.    
  66.     var availableTags1 = new Array(<?php echo $arreglo1; ?>);
  67.  
  68.     $( "#Especificaciones").autocomplete({
  69.     source: availableTags1
  70.     });
  71.  
  72.     });
  73. </script>

Gracias por la ayuda y pido disculpas
  #12 (permalink)  
Antiguo 04/10/2012, 08:51
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 12 años, 4 meses
Puntos: 220
Respuesta: autocompletar en campos dinamicos

Revisemos tu codigo paso a paso

Código PHP:
Ver original
  1. <?php
  2. require('Conexion.php');
  3. $con = "select distinct `resuktado` from `mediosexternos`";
  4. $query = mysql_query($con);
  5. ?>

- No creo que aca tengas problemas porque si te devuelva la consulta correctamente

Código Javascript:
Ver original
  1. function agregarUsuario(){
  2.     nuevaFila = document.getElementById("tabla").insertRow(-1);
  3.     nuevaFila.id=posicionCampo;
  4.     nuevaCelda=nuevaFila.insertCell(-1);
  5.     nuevaCelda.innerHTML="<td><td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas[]' value=''></td>";
  6.     nuevaCelda=nuevaFila.insertCell(-1);
  7.     nuevaCelda.innerHTML="<td> <input type='text' size='15'  id='Resultado["+posicionCampo+"]' name='Resultado["+posicionCampo+"]' ></td>";
  8.     nuevaCelda=nuevaFila.insertCell(-1);
  9.     $( "#Especifica" + posicionCampo).autocomplete({
  10.         source: availableTags1
  11.     });
  12.     nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
  13.     posicionCampo++;
  14. }

En esta parte de tu codigo tienes dos problemas:
- No manejes los names de los input de esta manera Resultado["+posicionCampo+"] si van a hacer un arreglo solamente basta que esten asi Resultado[]
- Segundo si ves bien en la parte que generas el autocompletar no existe la variable availableTags1 ya que no es publica y se encuentra dentro de una función por ende no va a mostrar una lista, debes ponerlo esto como una variable publica tal como lo haces con var posicionCampo=1;

Código PHP:
Ver original
  1. $(function() {
  2.    
  3.     <?php
  4.     while($row = mysql_fetch_array($query)) {
  5.         $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
  6.     }
  7.     $arreglo1= implode(", ", $cliente);
  8.     ?>
  9.    
  10.     var availableTags1 = new Array(<?php echo $arreglo1; ?>);
  11.  
  12.     $( "#Especificaciones").autocomplete({
  13.         source: availableTags1
  14.     });
  15.  
  16. });

En esta parte de tu codigo como te mencione saca todo este codigo para que este como una variable global

Código PHP:
Ver original
  1. <?php
  2.     while($row = mysql_fetch_array($query)) {
  3.         $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
  4.     }
  5.     $arreglo1= implode(", ", $cliente);
  6.     ?>
  7.    
  8.     var availableTags1 = new Array(<?php echo $arreglo1; ?>);

Al final tu codigo debe quedar de esta manera

Código PHP:
Ver original
  1. <script language="javascript" type="text/javascript">
  2. <?php
  3.     require('Conexion.php');
  4.     $con = "select distinct `resuktado` from `mediosexternos`";
  5.     $query = mysql_query($con);
  6.     while($row = mysql_fetch_array($query)) {
  7.         $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
  8.     }
  9.     $arreglo1= implode(", ", $cliente);
  10. ?>
  11.    
  12. var availableTags1 = new Array(<?php echo $arreglo1; ?>);
  13. var posicionCampo=1;
  14.  
  15. function agregarUsuario(){
  16.     nuevaFila = document.getElementById("tabla").insertRow(-1);
  17.     nuevaFila.id=posicionCampo;
  18.     nuevaCelda=nuevaFila.insertCell(-1);
  19.     nuevaCelda.innerHTML="<td><td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas[]' value=''></td>";
  20.     nuevaCelda=nuevaFila.insertCell(-1);
  21.     nuevaCelda.innerHTML="<td> <input type='text' size='15'  id='Resultado["+posicionCampo+"]' name='Resultado["+posicionCampo+"]' ></td>";
  22.     nuevaCelda=nuevaFila.insertCell(-1);
  23.     $( "#Especifica" + posicionCampo).autocomplete({
  24.         source: availableTags1
  25.     });
  26.     nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
  27.     posicionCampo++;
  28. }
  29.  
  30. function eliminarUsuario(obj){
  31.  
  32.     var oTr = obj;
  33.     while(oTr.nodeName.toLowerCase()!='tr'){
  34.         oTr=oTr.parentNode;
  35.     }
  36.     var root = oTr.parentNode;
  37.     root.removeChild(oTr);
  38. }
  39.  
  40. $(function() {
  41.  
  42.     $( "#Especificaciones").autocomplete({
  43.         source: availableTags1
  44.     });
  45.  
  46. });
  47. </script>
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #13 (permalink)  
Antiguo 04/10/2012, 10:13
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: autocompletar en campos dinamicos

Listo dale muchas gracias!! por la ayuda me sirvio ya ese era el problema gracias!!

Etiquetas: campos, dinamicos, formulario, funcion, html, input, php, select, autocompletado
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 23:47.