jQuery UI Autouzupełnianie z kategoriami

Question

Używam Auto Complete jQuery UI, aby dostarczyć sugestie ze zdalnego źródła dla pola wejściowego wyszukiwania. Mam działający przykład "zdalnego źródła danych". Na przykład, to działa:

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

Jednak chciałbym użyć „Categories” przykład aby posortować suggesions według kategorii. Przykład ze strony jQuery UI, z zestawu inline danych działa poprawnie:

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

Jednak gdy próbuję uzyskać dane z mojego pliku zdalnego

source: 'search.php' 

niczego nie sugerować . Oto kod z 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> 

Dane że search.php wraca jest prawidłowo sformatowany:

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

Każda pomoc będzie bardzo mile widziane!

Dzięki Greg

Answer 1

Twój plik PHP prawdopodobnie nie wraca prawy nagłówek. Dodaj to do swojego pliku PHP:

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

Przeglądarka następnie interpretuje odpowiedź jako JSON i podejmuje odpowiednie działania.

EDIT:

Twoja odpowiedź musi również mieć cudzysłowy wokół etykiet, a nie tylko wartości, po powrocie JSON w odpowiedzi. W PHP, używając json_encode() na tablicę obiektów powróci następujące JSON (linebreaks dodane):

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

Answer 2

Ponieważ przeniesione do UI 1.10.2 mój widget did'nt pracy!

Wystarczy modyfikacja w linii:

self._renderItem(ul, item); 

że staje:

self._renderItemData(ul, item); 

To znowu działa!