jQuery UI 自动完成类别

Question

我正在使用 jQuery UI 的自动完成功能从远程源为搜索输入框提供建议。我已经让“远程数据源”示例正常工作。例如，这有效:

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

但是，我想使用“Categories ”示例按类别对建议进行排序。来自 jQuery UI 站点的示例带有一组内联数据，效果很好:

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

又可以了!