div autocompletable y dependiente jquery UI

[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