div autocompletable y dependiente jquery UI

[marcos0586]

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

[infoturnosya]

Código MySQL:

SELECT * 
FROM    `profesional` 
WHERE  `apenom` LIKE  '%' || IFNULL( p_tu_parametro_nombre,  '%' ) 
LIMIT 0 , 30
 

[Alexis88]

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:

Nombre: <input type="text" id="nom" />
Apellido: <input type="text" id="ape" />
 

Código Javascript:

function autoNom(valor){
    $("#nom").autocomplete({
        source: "tuArchivo.php?apellido=" + (valor || ""),
        select: function(event, ui){ //Se ejecuta al selecciona una opción
            autoApe(ui.item.value);
        }
    });
}
 
function autoApe(valor){
    $("#ape").autocomplete({
        source: "tuArchivo.php?nombre=" + (valor || ""),
        select: function(event, ui){ //Se ejecuta al selecciona una opción
            autoNom(ui.item.value);
        }
    }); 
}
 
$(document).ready(function(){
    autoNom(); //Se ejecuta al cargar la página
    autoApe(); //Se ejecuta al cargar la página
    $("#nom").on("input", function(){ //Se ejecuta al cambiar el valor del campo
        autoApe($(this).val());
    });
    $("#ape").on("input", function(){ //Se ejecuta al cambiar el valor del campo
        autoNom($(this).val());
    });
});
 

Código PHP:

$conexion = new mysqli('servidor', 'usuario', 'contraseña', 'base de datos');
if ($conexion->connect_errno) exit($conexion->connect_errno . ': ' . $conexion->connect_error);
$term = $conexion->real_escape_string(strip_tags(trim($_GET['term'])));
if (isset($_GET['apellido'])){ //Si se busca por nombre
    $query = "SELECT strNombre FROM tabla WHERE strNombre LIKE '%$term%'";
    if (strlen($_GET['apellido'])){ //Si se ha seleccionado un apellido
        $apellido = $conexion->real_escape_string(strip_tags(trim($_GET['apellido'])));
        $query .= " AND strApellido = '$apellido'";
    }
}
if (isset($_GET['nombre'])){ //Si se busca por apellido
    $query = "SELECT strApellido FROM tabla WHERE strApellido LIKE '%$term%'";  
    if (strlen($_GET['nombre'])){ //Si se ha selecciona un nombre
        $nombre = $conexion->real_escape_string(strip_tags(trim($_GET['nombre'])));
        $query .= " AND strNombre = '$nombre'";
    }
}
$result = $conexion->query($query) or exit($conexion->error);
if ($result->num_rows){
    $respuesta = [];
    while ($row = $result->fetch_row()){
        $respuesta[] = ['value' => utf8_encode($row[0])]; //utf8_encode() para eñes y tildes
    }
    $result->free();    
    $return = json_encode($respuesta);
}
else{
    $return = json_encode(['No hay resultados']);   
}
echo $return;
$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

[marcos0586]

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.