JQuery UI Автозаполнение из удаленного источника по категориям

Question

На сайте jquery ui есть хорошая документация, в которой показаны опции автозаполнения, классифицированные по категориям http://jqueryui.com/demos/autocomplete/#categories

А также есть пример с показом удаленных предложений. http://jqueryui.com/demos/autocomplete/#remote

Но я хочу загрузить опции автозаполнения, распределенные по категориям из удаленного источника. Как я могу это сделать? Может ли кто-нибудь указать мне пример или фрагмент кода? Я пытался это долго. Если мой search.php может генерировать этот источник, необходимый для категоризованного предложения. Как мне реализовать это в интерфейсе?

Я могу сгенерировать возвращение этого из моего php. (Вот как это нужно для категорированного автозаполнения)

                    [
   { 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" }
   ];

Но как мне реализовать его во внешнем интерфейсе? Это код, доступный для удаленного источника на сайте. Как мне указать, что php даст результаты для категоризованного предложения?

 <script>
 $(function() {
  function log( message ) {
   $( "<div/>" ).text( message ).prependTo( "#log" );
   $( "#log" ).attr( "scrollTop", 0 );
  }

  $( "#birds" ).autocomplete({
   source: "search.php",
   minLength: 2,
   select: function( event, ui ) {
    log( ui.item ?
     "Selected: " + ui.item.value + " aka " + ui.item.id :
     "Nothing selected, input was " + this.value );
   }
  });
 });
 </script>

Answer 1

Примеры на сайте jqueryui выглядят так, как будто они будут работать.Ты это пробовал?Вам просто нужно переопределить метод _renderItem, как показано в примере категории.

Это работает?

<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 );
        });
    }
});

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

Answer 2

Если запрос идет в PHP и ничего не возвращает, убедитесь, что у вас есть значение обратного вызова, отправляемое JQuery, и верните его с помощью JSON.

$callback = $_GET['callback'];
$echo $callback.'('.json_encode($yourresultarray).')';