jQuery autocompletar muestra resultados vacíos

Tengo este script PHP para obtener todo el nombre del paciente de mi base de datos:

prepare($getPatients); $execGetPatients->bindValue(':cid', $cid); $execGetPatients->execute(); $getPatientsResult = $execGetPatients->fetchAll(); $i = 0; foreach($getPatientsResult as $result) { $res[$i] = $result; $i++; } echo json_encode($res); ?> 

Y tengo un cuadro de texto donde quiero mostrar el patient_name como autocompletar usando la biblioteca de autocompletar jquery-ui .

Aquí está mi script jQuery:

  $(document).ready(function() { $( "#searchTxt" ).autocomplete({ source: "../php/autoComplete.php" }); }) 

Puedo ver que si un tipo de un nombre en la pestaña de red puedo ver una matriz devuelta:

enter image description here

Pero en el cuadro de texto veo que el autocompletado está vacío como en la siguiente imagen:

enter image description here

Y muestra 2 cajas blancas en lugar de una que muestra la matriz devuelta

    Este es un buen complemento para ese tipo de resultados: https://twitter.github.io/typeahead.js/

    Creo que es porque los datos que ha pasado, parece que hay varias columnas, debe especificar la label y el value o debe ser una matriz simple (según su código debe ser este tipo de datos) como

     var availableTags = [ "ActionScript", "COBOL", "ColdFusion", ]; 

    Puede consultar más sobre el paso de campo personalizado

    Twitter typeahead.js es la mejor opción para implementar esta función.

    Eche un vistazo a esto para lograrlo con PHP , AJAX y TypeAhead.js

      

    enlace a TypeAhead.js

    Avíseme si necesita ayuda.

    Porque necesita la etiqueta y el valor archivados en su matriz json para que su sql sea,

     $getPatients = "SELECT *, name as label, id as value FROM patient WHERE clinic_id = :cid ORDER BY patient_id DESC";