jQuery UI Autocompletar con categorías

Question

Estoy usando el Autocompletar de jQuery UI para proporcionar sugerencias desde un origen remoto para un cuadro de entrada de búsqueda. Tengo el ejemplo de "origen de datos remoto" funcionando. Por ejemplo, esto funciona:

$("#search").autocomplete({ 
     source: "search_basic.php", 
     minLength: 2 
    }); 

Sin embargo, me gustaría utilizar el "Categories" ejemplo para ordenar los suggesions por categoría. El ejemplo de la página jQuery UI, con un juego en línea de los datos funciona bien:

 <script> 
$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
    var self = this, 
    currentCategory = ""; 
    $.each(items, function(index, item) { 
    if (item.category != currentCategory) { 
    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
    currentCategory = item.category; 
    } 
    self._renderItem(ul, item); 
    }); 
    } 
}); 

$(function() { 
    var data = [ 
    { label: "anders", category: "" }, 
    { label: "andreas", category: "" }, 
    { label: "antal", category: "" }, 
    { label: "annhhx10", category: "Products" }, 
    { label: "annk K12", category: "Products" }, 
    { label: "annttop C13", category: "Products" }, 
    { label: "anders andersson", category: "People" }, 
    { label: "andreas andersson", category: "People" }, 
    { label: "andreas johnson", category: "People" } 
    ]; 

    $("#search").catcomplete({ 
    delay: 0, 
    source: data 
    }); 
}); 
</script> 

Sin embargo, cuando intento de obtener los datos de mi archivo remoto

source: 'search.php' 

no sugiere nada . Aquí está el código con el search.php:

<script> 
$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
    var self = this, 
    currentCategory = ""; 
    $.each(items, function(index, item) { 
    if (item.category != currentCategory) { 
    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
    currentCategory = item.category; 
    } 
    self._renderItem(ul, item); 
    }); 
    } 
}); 

$(function() { 

    $("#search").catcomplete({ 
    source: 'search.php' 
    }); 
}); 
</script> 

Los datos que search.php está volviendo tiene el formato correcto:

  [ 
{ label: "annhhx10", category: "Products" }, 
{ label: "annttop", category: "Products" }, 
{ label: "anders", category: "People" }, 
{ label: "andreas", category: "People" } 
] 

Cualquier ayuda sería muy apreciada!

Gracias, Greg

Answer 1

su archivo PHP probablemente no devuelve la cabecera derecha. Agregue esto a su archivo PHP:

header('Content-Type: application/json'); 

El navegador entonces interpretar la respuesta JSON y actuar en consecuencia.

EDIT:

Su respuesta también tiene que tener comillas alrededor de las etiquetas, no sólo los valores, al volver JSON en una respuesta. En PHP, usando json_encode() en una matriz de objetos devolverá el siguiente JSON (saltos de línea en el original):

[ 
{ "label": "annhhx10", "category": "Products" }, 
{ "label": "annttop", "category": "Products" }, 
{ "label": "anders", "category": "People" }, 
{ "label": "andreas", "category": "People" } 
] 

Answer 2

Desde que emigró a IU 1.10.2 mi aparato did'nt funciona!

Sólo una modificación en la línea:

self._renderItem(ul, item); 

que se convierte en:

self._renderItemData(ul, item); 

que funciona de nuevo!