El problema que tienes es que el autocomplete espera un json con los campos label y value.
source
Type: Array or String or Function( Object request, Function
response( Object data ) ) Default: none; must be specified Defines the
data to use, must be specified.
Independent of the variant you use, the label is always treated as
text. If you want the label to be treated as html you can use Scott
González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.
Multiple types supported:
Array:
An array can be used for local data. There are two supported formats:
- An array of strings: [ "Choice1", "Choice2" ]
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item.
If just one property is specified, it will be used for both, e.g., if
you provide only value properties, the value will also be used as the
label.
...(continúa)
Fuente: http://api.jqueryui.com/autocomplete/
O bien generas el json de esa forma o usas una función para convertirlo.
En vez de poner:
response(data);
Usarías:
response($.map(data, function (item) {
return {
label: item.nombre,
value: item.id
}
}));
La función del autocomplete quedaría:
$("#responsables").autocomplete({
source:function(request,response){
$.ajax({
url: "https://api.myjson.com/bins/1fcz36",
type:"GET",
dataType:"json",
data:{
search: request.term
},
success:function(data){
response($.map(data, function (item) {
return {
label: item.nombre,
value: item.id
}
}))
}
})
}
})
Los datos json: http://myjson.com/1fcz36
El código ejecutable: https://jsfiddle.net/k3an9uo4/1/
(edito)
Lo mostrado hasta ahora era un ejemplo estático de como configurar el autocomplete de jQuery UI según la pregunta original.
Para que responda dinamicamente hay que configurar el ajax para que ejecute un script y este devolverá los datos según lo tecleado por el usuario.
Como podemos comprobar en la documentación de jQuery.ajax() en el parámetro url indicamos la ruta al script, en type configuramos el método a usar (GET o POST) y en data los parámetros que deseemos pasar al script, en nuestro caso, al menos, el texto tecleado por el usuario.
$("#responsables").autocomplete({
source:function(request,response){
$.ajax({
url: "consulta_ajax.php",
type:"GET",
dataType:"json",
data:{
search: request.term
},
success:function(data){
response($data)
}
})
}
})
Lo más cómodo, si tenemos el control del origen de datos, es que el
propio script devuelva el json con los campos label y value (o
solo label si no deseamos usar indices) para no complicar el
javascript.
consulta_ajax.php
<?php
$mysqli = new mysqli(DBURI,DBUSER,DBPASS,DBNAME);
$texto = $_GET['search'];
$sql = " SELECT id AS value, nombre AS label FROM ciudades WHERE nombre LIKE '%$texto%' ";
$result = $mysqli->query($conexion, $sql);
while ($myrow = $result->fetch_array(MYSQLI_ASSOC)) {
$resultado[]=$myrow;
}
echo json_encode($resultado);
?>