Ir al contenido



Foto

auto llena de input


  • Por favor identifícate para responder
8 respuestas en este tema

#1 Noe Velazquez Hernandez

Noe Velazquez Hernandez

    Member

  • Miembros
  • PipPip
  • 21 mensajes

Escrito 20 diciembre 2019 - 06:24

Hola foro esperando me puedan ayudar, y es con lo siguiente tengo una tabla con 5 campos

Lo que pretendo es que cuando marquen un nombre sobre el combo llene los input con la información correspondiente, este problema lo he tratado de resolver desde hace mucho tiempo no tengo los conocimientos para resolverlo. Soy principiante en estas tecnologías he pedido ayuda y al parecer no les importa y no me contestan o me dicen resuélvelo con esto o con lo otro pero una persona sin los conocimientos mínimos se nos hace muy difícil, total estuve buscando hasta que me encontré un video que hace algo similar a lo que deseo pero…. Siempre hay un pero copie línea por linea el script pero no hace lo esperado me podrían ayudar Por Favorrrrrrrrrr…

id_clte int(10)

nombre varchar (40)

direccion varchar(40)

rfc varchar(25)

telefono varchar(20)

 

busca_emple.php


php
  1. <?
  2.  
  3. require ("conecta.php");
  4.  
  5. ?>
  6.  
  7. <html lang="es">
  8.  
  9. <head>
  10.  
  11. <meta charset="UTF-8">
  12.  
  13. <title>Auto Complementar PHP / MYSQL / Jquery</title>
  14.  
  15. <script type="text/javascript" src="/query/jquery.min.js"></script>
  16.  
  17. <script type="text/javascript">
  18.  
  19. function nomclte(id){
  20.  
  21. /*alert(id)*/
  22.  
  23. $.post("busca_emple1.php",{idclte:id},function(retorno){
  24.  
  25. dato = retorno.split("/");
  26.  
  27. $('#dir').val(dato[0]);
  28.  
  29. $('#rff').val(dato[1]);
  30.  
  31. $('#tel').val(dato[2]);
  32.  
  33. });
  34.  
  35. }
  36.  
  37. </script>
  38.  
  39. </head>
  40.  
  41. <body>
  42.  
  43. <form>
  44.  
  45. Nombre del Cliente <br />
  46.  
  47. <select name="clte" onchange="nomclte(this.value)">
  48.  
  49. <?
  50.  
  51. $sql="Select id_clte,nombre From cliente";
  52.  
  53. $lista=mysqli_query($conectado,$sql);
  54.  
  55. while($fila=mysqli_fetch_object($lista)){
  56.  
  57. echo "
  58.  
  59. <option value='$fila->id_clte'>
  60.  
  61. $fila->nombre
  62.  
  63. </option>
  64.  
  65. ";
  66.  
  67. }?>
  68.  
  69. </select><br />
  70.  
  71. Direccion:<br />
  72.  
  73. <input type="text" name="dir" id="dir" /><br />
  74.  
  75. Rfc:<br />
  76.  
  77. <input type="text" name="rff" id="rff" /><br />
  78.  
  79. Telefono:<br />
  80.  
  81. <input type="text" name="tel" id="tel" /><br />
  82.  
  83.  
  84. </form>
  85.  
  86. </body>
  87.  
  88. </html>

 

busca_emple1.php


php
  1. <?
  2.  
  3. require ("conecta.php");
  4.  
  5.  
  6. $id = $_POST['idclte'];
  7.  
  8. $sqlcve = mysqli_query("Select * From cliente Where id_clte='$id'");
  9.  
  10.  
  11. $paso = mysqli_fetch_object($sqlcve);
  12.  
  13. $dato = $paso->direccion."/".$paso->rfc."/".$paso->telefono;
  14.  
  15.  
  16. echo $dato;
  17.  
  18. ?>

 

 

GRACIAS


  • 0

#2 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.270 mensajes
  • LocationArgentina

Escrito 23 diciembre 2019 - 06:59

Buenas Noches Noe,

He editado tu mensaje para darle formato al código. Recuerda que puedes copiar y pegar código con formato, para ello haz clic en el icono "<>" del editor de mensajes del foro. Allí elijes el lenguaje y en cuadro de abajo pegas el código.

 

Respecto a tu duda, por lo estoy entendiendo lo que buscar es un autocomplete, o autocompletado. De modo de a medida que se escribe en un input se te despliegue una lista con opciones coincidentes para que elijas. Si es el caso, el código que tienes no cumple con dicho propósito.

 

Te voy a dar una guía de como proceder:

1. Debes preparar tu consulta de modo que pueda devolver datos de forma incremental. Lo típico es emplear el operador LIKE en combinación del comodín %. Un ejemplo:


php
  1. $consulta = "SELECT nombre, apellido, campo1, ..., campoN FROM clientes WHERE nombre LIKE '".$termino.."'%'";

Donde $termino será la variable que almacenará el contenido a buscar. O directamente, puedes pasar el $_GET['termino'].

 

Esta consulta estará en el script que se invocará vía AJAX en el input en el cual se implementará el autocompletado.

 

2. En este mismo script deberás preparar un vector en que almacenarás el resultado devuelto por la consulta. Este vector lo devolverás en formato JSON. Algo típico:


php
  1. // ejecutamos la consulta
  2. $query = $conn->query($consulta);
  3.  
  4. // recorremos el conjunto de datos devuelto y lo ponemos en un vector
  5. while ($cliente = $query->fetch_assoc()){
  6. $resultado[] = array(
  7. 'nombre' => $cliente['nombre'];
  8. 'apellido' => $cliente['apellido'];
  9. );
  10. }
  11.  
  12. // ahora para finalizar lo devolvemos JSON
  13. echo json_encode($resultado);

Ahora veamos desde el lado cliente. Como dije, se requiere AJAX. Dentro de etiquetado <script> o en un .js propiamente, según tus necesidades, debes escribir dar forma el autocomplete. Para ello sigue esta estructura:


javascript
  1. $("#inputnombre").autocomplete({
  2. source: function(request, response){
  3. $.ajax({
  4. type: "GET",
  5. url: "aqui va script php",
  6. data: 'termino=' + request.tem.trim(),
  7. dataType: "html",
  8. cache: false,
  9. success: function(data){
  10. var cli = $.parseJSON(data);
  11. response($.map(cli, function(item){
  12. return{
  13. label: item.nombre,
  14. value: item.nombre,
  15. desc: item.nombre + '|' + item.apellido
  16. }
  17. }))
  18. }
  19. });
  20. },
  21. minLength: 2,
  22. change: function(event, ui){
  23. if (ui.item == null || ui.item == undefined){
  24. $('#inputnombre').val();
  25. $('#inputapellido').val();
  26. }
  27. },
  28. select: function(event, ui){
  29. var info = ui.item.desc.split('|');
  30. $("#inputnombre").val(info[0]);
  31. $("#inputapellido").val(info[1]);
  32. }
  33. });

Explico superficialmente el script Jquery:

 

autocomplete() es la función jquery() que hace todo el trabajo. Se empieza a disparar cuando dentro del input cuyo nombre se fijó como "inputnombre" alcanza la longitud mínima. Que en este ejemplo es de 2 caracteres.

Una vez que se invoca al script php y este responde con sucess, se mapea el JSON. El contenido mapeado contiene 3 propiedades o atributos. El que más nos interesa es desc. Allí se almacenará todo lo que necesitemos devolver y de interés para mostrar al usuario. En el ejemplo aprovechamos para traernos el nombre y el apellido. Notarás que desc contiene los datos concatenados y separados por un pipe |. Tu puedes poner el caracter que elijas, la idea es poner algo que nos sirva de marca de separación/delimitador y que sepamos que no contendrá en nombre ni en apellido.

 

Luego está la funcion change(), que se dispara cada vez que el contenido del input va a cambia. En change se aprovecha para que cuando el contenido cambie y no se seleccione nada o se pone el campo vacío se limpie los inputs.

Por ultimo está la funcion select(), que se dispara cuando se selecciona el item. Aquí lo que hacemos es leer el contenido de "desc", y lo descomponemos en sus partes con split(). Y por último se coloca en cada input el dato que corresponde.

 

Luego en la página que se invoca todo tendrás algo como:


html5
  1. <input type="text" id="inputnombre" name"inputnombre" value="">
  2. <input type="text" id="inputapellido" name"inputapellido" value="">

Espero que esta breve guía te sea de ayuda, por el momento es lo que puedo ofrecerte. Si necesitas que amplíe en información no dudes el pedirlo, en cuanto tenga más tiempo podrá aportar más material.

 

Saludos,


  • 0

#3 noe velazquez

noe velazquez

    Newbie

  • Miembros
  • Pip
  • 5 mensajes

Escrito 26 diciembre 2019 - 08:57

Hola buenos días!!!

 

Te agradezco que hayas contestado mi pregunta apenas lo vi por qué no he estado en mi casa apenas llegue el día de ayer por que el día 23 de diciembre falleció mi papá

 

Cuando plantee mi pregunta no lo hice correctamente y tampoco lo explique bien lo que deseo es que cuando el usuario de clic en el combo(select-option) nos regrese información y lo muestre en los input  esa información la tengo en una tabla ejemplo

 

Cuando le das clic al combo muestra los nombre Juan, Pedro, marcos etc. etc.

Si le doy clic en Juan me muestra en el input dir su dirección (calle nopal 123) en el otro input tel me muestre su telefono (55-124578) no requiero auto llenado.

 

Al inicio comento que vi un video y hace exactamente lo que requiero le das clic al combo despliega una lista con nombres y al elegir el nombre requerido en los input que se muestran más abajo despliega la información correspondiente al nombre elegido

 

De antemano te doy las gracia y te envió un fuerte abrazo desde MEXICO


  • 0

#4 noe velazquez

noe velazquez

    Newbie

  • Miembros
  • Pip
  • 5 mensajes

Escrito 26 diciembre 2019 - 09:07

esta es la dirección que aparase en el url 

 

https://www.youtube....jjPj5IU&t=1449s


  • 0

#5 noe velazquez

noe velazquez

    Newbie

  • Miembros
  • Pip
  • 5 mensajes

Escrito 26 diciembre 2019 - 09:12

mi tabla tiene 5 campos

 

id_clte int(10)

nombre varchar (40)

direccion varchar(40)

rfc varchar(25)

telefono varchar(20)


  • 0

#6 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.270 mensajes
  • LocationArgentina

Escrito 26 diciembre 2019 - 07:37

Buenas noches Noe, mi más sentido pésime.

 

Para lo que describes el proceso en forma resumida consiste en 2 etapas:

1. Llenar el combo con las opciones correspondientes. Esto hay 2 formas de hacerlo dinámicamente: cuando se ejecute el script php, o bien, haciéndolo desde el lado cliente con una llamada AJAX.

2. Y en 2do lugar, cuando ya tienes llenado el select, hay que implementar una llamada AJAX para que traiga la información según la opción elegida y disponer dicha data en los inputs y demás controles de cara al usuario.

 

Lamentablemente en estos momentos no estoy con demasiado tiempo para ayudarte, pero en 24hrs y si no te hes molestia podré destinarle el tiempo necesario.

Trataré de elaborar algún ejemplo que sea lo más claro posible, que exponga los pasos 1 (por las 2 formas) y 2.

 

Lo que si te puedo ir sugiriendo es que te vayas familiarizando un poco más con JQuery, porque si está en tus planes en hacer un sitio/app web más temprano que tarde necesitarás reforzar este tema. Yo no soy un experto en la materia, no es mi mayor fuerte, pero hasta el momento he aprendido un par de cosas. Los ejemplos que exponga aquí estará influenciado por mi estilo de desarrollo y en como fuí aprendiendolo.

 

Saludos,


  • 0

#7 noe velazquez

noe velazquez

    Newbie

  • Miembros
  • Pip
  • 5 mensajes

Escrito 27 diciembre 2019 - 11:50

hola buenos días...

gracias yo esperare, mientras tanto tratare de ponerme el día con AJAX.

 

 

GRACIAS.


  • 0

#8 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.270 mensajes
  • LocationArgentina

Escrito 27 diciembre 2019 - 06:23

Buenas tardes-noches,

Tal como prometí. Vuelvo a exponer un poco de luz al asunto.

 

Como dije antes, para lo que buscas se necesita realizar las cosas en 2 partes: la parte 1 consiste en tener llenado el combo con las opciones. Luego le sigue el paso que consiste en la llamada AJAX para que al seleccionar un item del combo, se obtenga cierta data.

 

Hagamos de cuenta que tienes una página "clientes.php" que es la página en donde se consultará y mostrará la info. Por un lado necesitamos un select que tendrá el listado, y unos cuantos span para mostrar la info*. En su concepción más simple y básica, y que nos interesa, en clientes.php tendremos algo como esto:


html5
  1. <select name="selcliente" id="selcliente">
  2.  
  3. <span id="idclte"></span>
  4. <span id="nombre"></span>
  5. <span id="direccion"></span>
  6. <span id="rfc"></span>
  7. <span id="telefono"></span>

*Podrían emplearse otros elementos html, aunque por comodidad y simplicidad si lo deja así.

 

Como puedes ver, el select así como está declarado sin ningún item. Hay en forma resumida, 2 alternativas a seguir.

Alternativa 1: completar el select al mismo momento de invocar y cargar la página del script clientes.php

 

Para ello basta con tener algo como esto:


php
  1. <select name="selcliente" id="selcliente">
  2. <?
  3. $sql = "select id_clte, nombre from clientes WHERE ...";
  4. $query = $conn->query($sql) or die('Error al crear el query');
  5. if ($query->num_rows > 0){
  6. while ($cli = $query->fetch_assoc()){
  7. ?>
  8. <option value="<?echo $cli['id_clte'];?>"><?echo $cli['nombre'];?><option>
  9. <?
  10. }
  11. }
  12. ?>
  13. </select>

Como puedes ver, en el mismo script php, al momento de declarar el select, allí mismo se embebe el codigo php para armar la consulta, ejecutar, e iterar sobre el conjunto de datos devuelto y meter todo en options.

El ejemplo está hecho con msyli OO, creería que no te sería problemas en cambiarlo por el enfoque estructurado empleando las funciones mysqli_* correspondientes. $conn es la variable donde se tiene la conexión, $sql contiene el string de la consulta SQL. $query por su parte almacena el objeto query creado, y con $cli accedemos a los registros.

 

Alternativa 2: completar el combo por llamada AJAX. Esta alternativa es un poco más indirecta, pero tiene la particularidad de que ofrece más dinamismo y la posibilidad de que se pueda invocar y obtener los nuevos clientes sin necesidad de recargar la página. Si disponemos de algún control que dispare la llamada a un hipotético CargarClientes().

 

Por un lado necesitamos un script php que será invocado vía AJAX que nos traiga el listado. Aquí hay variedad de formas de hacerlo, hay quienes prefieren ya traernos el contenido html con todos los options a meter dentro del select, y otros que prefieren un JSON con el objeto lista para luego iterar y meter item a item.

Las necesidades, cuestiones técnicoss-operativas pueden inclinarte la balanza para una u otra opción.

 

Yo voy a exponerte la 2da forma: JSON y meter item a item. Dejaré unos tips de como hacerlo por la alternativa "html".

 

Digamos que tenemos un 2do script llamado cargarclientes.php. Este script deberá tener algo como esto:


php
  1. <?
  2. // aquí los require() y algunas operaciones de control y evaluación de parámatros pasados
  3. // ...
  4.  
  5. // aquí el código que nos interesa:
  6. $sql = "SELECT id_clte, nombre FROM clientes WHERE... ";
  7. $query = $conn->query($sql) or die('error');
  8.  
  9. $lista = array();
  10. $i = -1;
  11.  
  12. if ($query->num_rows > 0){
  13. while ($cli = $query->fetch_assoc()){
  14. $i += 1;
  15.  
  16. $item = array(
  17. 'id' => $cli['id_clte'],
  18. 'value' => $cli['nombre']
  19. );
  20.  
  21. $lista[$i] = $item;
  22. }
  23. } else {
  24. $item = array(
  25. 'id' => 0,
  26. 'value' => 'Seleccione uno'
  27. );
  28.  
  29. $lista[0] = $item;
  30. }
  31.  
  32. // aquí devolvemos la lista
  33. echo json_encode($lista);
  34. ?>

Habrás notado que con esto consigo una estructura JSON que contenga algo como esto:

vector = { {id, value}, {id, value}, {id, value}, .... {id, value} }

 

Una lista donde cada posición contiene una dupla (id, value). ¿Porqué? Porque necesitaremos el id del cliente, para poder referenciar y consultar la info según el ID y obviamente el nombre. El id lo terminaremos metiendo en el atributo value del option, y el nombre será el texto del mismo. Necesitaremos conseguir algo como:


html5
  1. <option value="id">nombre</option>

Ya tenemos el script que nos devuelva la lista, ahora necesitamos hacer el codigo JQuery y la llamada AJAX. Dentro de tu $(document).ready(function(){} tendrás algo como esto:


javascript
  1. function CargarClientes(){
  2. $.ajax({
  3. type: 'GET',
  4. url: 'admin/cargarclientes.php',
  5. data: 'aqui la lista de paramatros que necesites pasarle al script php',
  6. async: false,
  7. //datatype: "html",
  8. cache: false,
  9. beforeSend: function(){},
  10. complete: function(){},
  11. success: function(data){
  12. //alert(data);
  13. var newOptions=jQuery.parseJSON(data);
  14. //alert(newOptions);
  15. $('#selcliente').empty();
  16.  
  17. var i = -1;
  18. $.each(newOptions, function(key, value){
  19. i += 1;
  20. //alert(newOptions[i].key + '|' + newOptions[i].value);
  21. $('#selcliente').append('<option value="'+ newOptions[i].id +'"'>' + newOptions[i].value + '</option>');
  22. });
  23. }
  24. });
  25. }

Luego, simplemente es cosa de invocar o llamar a esta función CargarClientes(), una buena alternativa es justo al ejecutarse el ready(), por lo que allí mismo basta con un CargarClientes();

Como he dicho, hay otras formas de devolver esta info. La alternativa quizá más poderosa es que el servidor ya nos traiga el html a meter dentro del select en lugar de delegar en el navegador cliente que haga el trabajo.

En este caso el script php en lugar de armar un vector nos bastaría con una simple variable $opciones en la que vamos concatenando el string con el html del option a medida que iteramos por los registros. Entonces en vez de hacer un $("nuestroselect").append() dentro de un for(), podemos hacer una única llamada append(). En este escenario en lugar de devolver el vector, podemos devolver algo como esto:


php
  1. $salida['cantitems'] = $cantidad;
  2. $salida['items] = $opciones;
  3.  
  4. echo json_encode($salida);

La estructura JSON se lee en nuestro js de la siguiente forma:


javascript
  1. var newOptions = $.parse_JSON(data);
  2. if (newOptions.cantidad > 0){
  3. $('#selcliente').append(newOptions.items); // asumimos que items tendra todo el html
  4. }

Notarás que no es mucho cambio. Cada forma tiene sus pros y contras. Y hasta es válido mezclar ambas cosas... en ocasiones tendrás que tener ya las cosas másticadas en forma HTML, y en otras más "sueltas" o estructuradas de otra forma.

 

Para no extender mucho el tema, corto el mensaje acá y continúo con la 2da parte en el siguiente mensaje.


  • 0

#9 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.270 mensajes
  • LocationArgentina

Escrito 27 diciembre 2019 - 06:51

Para la 2da parte necesitamos otro script php al que podríamos llamar cargarinfocliente.php.

Este script no va a variar demasiado comparado con los que hemos escrito antes. Su contenido tendrá algo como esto:


php
  1. <?
  2. // armamos la consulta y ejecutamos
  3. $sql = "SELECT ... FROM clientes WHERE id_clte = ".$_GET['id'];
  4. $query = $conn->query($sql) or die(' Error!');
  5.  
  6. if ($query->num_rows == 1){
  7. $cli = $query->fetch_assoc();
  8.  
  9. $salida['error'] = 'N';
  10. $salida['errinfo'] = 'no hay error';
  11.  
  12. $salida['telefono'] = $cli['telefono'];
  13. // ...
  14. $salida['dato_N'] = $cli['campo_N'];
  15.  
  16. } else {
  17. $salida['error'] = 'S';
  18. $salida['errinfo'] = 'No se ha encontrado el cliente';
  19. }
  20.  
  21. echo json_encode($salida);
  22. ?>

Notarás que de manera similar al del final de mi mensaje anterior, aquí estoy devolviendo un json con una estructura bastante simple:

{ "campo1": "valor1", "campo2":"campo2", ..., "campoN":"campoN" }

 

el JSON se lee igual que en el ejemplo del post anterior:


php
  1. var info = $.parse_JSON(data);
  2. if (info.error == 'N'){
  3. // aqui vamos a meter los datos devuelto del cliente!
  4. $('#direccion').html(info.direccion);
  5. } else {
  6. alert(info.errinfo);
  7. }

Puedes ver que hago un simple $('#id-del-span').html(info.campo)  para poner el contenido en el span. Recuerda: .html() es para colocar contenido en labels, span, p, y otras estructuras "textuales". Se debe utilizar .val() para colocar el contenido dentro de inputs, select, y otros controles visuales.

 

La pregunta ahora es ¿Donde y cuando se ejecuta el codigo AJAX que hace esa carga de datos? Yo recomendaría que de manera similar a CargarClientes() tengas una función CargarInfoCliente(idcliente) que reciba como parámetro el id del cliente almacenado en el value del option. CargarInfoCliente() en su declaración ajax cuando se completa la propiedad data deberá tener algo como esto:


javascript
  1. data: 'cargarinfocliente.php?id=' + idcliente,

Entonces en el evento Change() de nuestro select, obtenemos el valor seleccionado y llamamos a la función:


javascript
  1. $('#selcliente').change(function(){
  2. var valor = $(this).val();
  3. CargarInfoCliente(valor);
  4. });

Espero que con estos tips puedas avanzar. Si tienes alguna duda ven aquí y podremos guiarte. Muestranos tus avances y trata de ser lo más explicativo y detallista posible.

 

Saludos,
 


  • 0