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

Question

Я использую автозаполнение пользовательского интерфейса jQuery для предоставления предложений из удаленного источника для поля ввода поиска.У меня работает пример "источника удаленных данных".Например, это работает:

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

Однако я бы хотел использовать пример " Categories " для сортировки предложений по категориям.Пример с сайта пользовательского интерфейса jQuery со встроенным набором данных работает нормально:

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

Однако, когда я пытаюсь получить данные из моего удаленного файла

source: 'search.php'

, это неничего не предлагать.Вот код с 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>

Данные, которые возвращает search.php, правильно отформатированы:

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

Любая помощь будет принята с благодарностью!

Спасибо, Грег

Answer 1

С момента перехода на UI 1.10.2 мой виджет не работает!

Просто изменение в строке:

self._renderItem( ul, item );

, которое становится:

self._renderItemData( ul, item );

Это снова работает!

Answer 2

Ваш PHP-файл, вероятно, не возвращает правильный заголовок.Добавьте это к вашему файлу PHP:

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

Браузер интерпретирует ответ как JSON и будет действовать в соответствии с ним.

РЕДАКТИРОВАТЬ:

Ваш ответ также должен иметь кавычки вокруг меток, а не только значения, при возврате JSON в ответ.В PHP использование json_encode() для массива объектов вернет следующий JSON (добавлены разрывы строк):

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