Completamento dell'interfaccia utente jQuery con categorie

Question

Uso l'interfaccia utente di jQuery UI per fornire suggerimenti da una fonte remota per una casella di input di ricerca. Ho lavorato all'esempio di "origine dati remota". Ad esempio, questo funziona:

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

Tuttavia, mi piacerebbe utilizzare la "Categories" esempio per ordinare i suggesions per categoria. L'esempio dal sito di jQuery UI, con un set in linea dei dati funziona bene:

 <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> 

Tuttavia, quando si tenta di ottenere i dati dal mio file remoto

source: 'search.php' 

non suggerisce nulla . Ecco il codice con il 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> 

I dati che search.php sta tornando sia correttamente formattato:

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

Qualsiasi aiuto sarebbe molto apprezzato!

Grazie, Greg

Answer 1

Il file PHP probabilmente non restituisce l'intestazione destra. Aggiungi questo al vostro file PHP:

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

Il browser quindi interpretare la risposta come JSON e agire su di esso.

EDIT:

La vostra risposta deve anche avere le virgolette attorno alle etichette, non solo i valori, al ritorno JSON in una risposta. In PHP, utilizzando json_encode() su un array di oggetti restituirà il seguente JSON (linebreaks aggiunto):

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

Answer 2

Da quando ho migrato a Ui 1.10.2 mio widget di did'nt lavoro!

Basta una modifica nella linea:

self._renderItem(ul, item); 

che diventa:

self._renderItemData(ul, item); 

che funziona di nuovo!