Foros del Web » Programando para Internet » Jquery »

div autocompletable y dependiente jquery UI

Estas en el tema de div autocompletable y dependiente jquery UI en el foro de Jquery en Foros del Web. Hola, buenas tardes, le comento que estoy utilizando el autocompletar de jquery para los input: nombre ,input: apellido, para lo cual estoy cargando todos los ...
  #1 (permalink)  
Antiguo 26/01/2016, 05:13
 
Fecha de Ingreso: diciembre-2009
Mensajes: 52
Antigüedad: 9 años, 8 meses
Puntos: 1
div autocompletable y dependiente jquery UI

Hola, buenas tardes, le comento que estoy utilizando el autocompletar de jquery para los input: nombre ,input: apellido, para lo cual estoy cargando todos los nombres en un array y todos los apellidos en otro array y jquery hace el resto, el problema se me presenta cuando me piden que ademas de ser autocompletable debe ser también dependiente de cualquier valor ingresado previamente, por ejemplo si en el input nombre ingreso pepe, cuando pase al input apellido solo me sugiera los apellidos que tengan como nombre pepe y no todos los apellidos que previamente tengo cargado en ese array sino simplemente los que satisfagan la primer condición y viceversa, es decir si ingreso un apellido que me autocomplete con sugerencias que correspondan al apellido ingresado. espero que me entiendan lo que intento hacer y me puedan ayudar desde ya muchas gracias por su tiempo. saludos
  #2 (permalink)  
Antiguo 26/01/2016, 08:21
 
Fecha de Ingreso: diciembre-2015
Ubicación: rosario
Mensajes: 69
Antigüedad: 3 años, 9 meses
Puntos: 5
Respuesta: div autocompletable y dependiente jquery UI

Código MySQL:
Ver original
  1. FROM    `profesional`
  2. WHERE  `apenom` LIKE  '%' || IFNULL( p_tu_parametro_nombre,  '%' )
  3. LIMIT 0 , 30
  #3 (permalink)  
Antiguo 26/01/2016, 14:56
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 10 meses
Puntos: 929
Respuesta: div autocompletable y dependiente jquery UI

Vas a tener que hacer la carga de las fuentes de datos de forma dinámica, es decir, al momento de escribir y seleccionar las opciones y no antes.

Un ejemplo suponiendo que la tabla de la base de datos tiene dos campos "strNombre" y "strApellido":
Código HTML:
Ver original
  1. Nombre: <input type="text" id="nom" />
  2. Apellido: <input type="text" id="ape" />

Código Javascript:
Ver original
  1. function autoNom(valor){
  2.     $("#nom").autocomplete({
  3.         source: "tuArchivo.php?apellido=" + (valor || ""),
  4.         select: function(event, ui){ //Se ejecuta al selecciona una opción
  5.             autoApe(ui.item.value);
  6.         }
  7.     });
  8. }
  9.  
  10. function autoApe(valor){
  11.     $("#ape").autocomplete({
  12.         source: "tuArchivo.php?nombre=" + (valor || ""),
  13.         select: function(event, ui){ //Se ejecuta al selecciona una opción
  14.             autoNom(ui.item.value);
  15.         }
  16.     });
  17. }
  18.  
  19. $(document).ready(function(){
  20.     autoNom(); //Se ejecuta al cargar la página
  21.     autoApe(); //Se ejecuta al cargar la página
  22.     $("#nom").on("input", function(){ //Se ejecuta al cambiar el valor del campo
  23.         autoApe($(this).val());
  24.     });
  25.     $("#ape").on("input", function(){ //Se ejecuta al cambiar el valor del campo
  26.         autoNom($(this).val());
  27.     });
  28. });

Código PHP:
Ver original
  1. $conexion = new mysqli('servidor', 'usuario', 'contraseña', 'base de datos');
  2. if ($conexion->connect_errno) exit($conexion->connect_errno . ': ' . $conexion->connect_error);
  3. $term = $conexion->real_escape_string(strip_tags(trim($_GET['term'])));
  4. if (isset($_GET['apellido'])){ //Si se busca por nombre
  5.     $query = "SELECT strNombre FROM tabla WHERE strNombre LIKE '%$term%'";
  6.     if (strlen($_GET['apellido'])){ //Si se ha seleccionado un apellido
  7.         $apellido = $conexion->real_escape_string(strip_tags(trim($_GET['apellido'])));
  8.         $query .= " AND strApellido = '$apellido'";
  9.     }
  10. }
  11. if (isset($_GET['nombre'])){ //Si se busca por apellido
  12.     $query = "SELECT strApellido FROM tabla WHERE strApellido LIKE '%$term%'"; 
  13.     if (strlen($_GET['nombre'])){ //Si se ha selecciona un nombre
  14.         $nombre = $conexion->real_escape_string(strip_tags(trim($_GET['nombre'])));
  15.         $query .= " AND strNombre = '$nombre'";
  16.     }
  17. }
  18. $result = $conexion->query($query) or exit($conexion->error);
  19. if ($result->num_rows){
  20.     $respuesta = [];
  21.     while ($row = $result->fetch_row()){
  22.         $respuesta[] = ['value' => utf8_encode($row[0])]; //utf8_encode() para eñes y tildes
  23.     }
  24.     $result->free();   
  25.     $return = json_encode($respuesta);
  26. }
  27. else{
  28.     $return = json_encode(['No hay resultados']);  
  29. }
  30. echo $return;
  31. $conexion->close();

Cuando cargue la página, se modifique el valor de cualquiera de ambos campos de texto o se seleccione una de las opciones de la lista del autocompletado, se ejecutará una o ambas funciones, según sea el caso. Dichas funciones, "autoNom" y "autoApe", registran en los campos de texto al widget autocomplete, con la salvedad de que cada uno enviará un valor distinto para realizar la búsqueda. El widget utiliza la variable term de forma interna para realizar la búsqueda, por lo que cuando busquemos las coincidencias en la base de datos, hay que hacerlo utilizando dicho nombre. El evento select dispara una función que se ejecutará cuando se seleccione una de las opciones de la lista de autocompletado, mientras que el evento input ocurre cuando el valor de un campo de texto es cambiado.

Cuando la fuente de datos es externa, como en este caso, el widget acepta un objeto JSON en donde cada elemento debe estar asociado a un índice de nombre "value"; de esta manera, se podrán visualizar en la lista de autocompletado. Para elaborado el objeto JSON, solo tienes que crear un array que irás llenando con los valores encontrados en la base de datos y, finalmente, solo te quedará parsearlo a JSON e imprimirlo.

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 26/01/2016 a las 16:42 Razón: Mejoras
  #4 (permalink)  
Antiguo 27/01/2016, 03:28
 
Fecha de Ingreso: diciembre-2009
Mensajes: 52
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: div autocompletable y dependiente jquery UI

hola, muchas gracias por las respuestas y por la explicación tan clara y dedicada que dio alexis88. hoy mismo lo estoy probando a ver como me funciona.

Etiquetas: dependiente
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 09:47.