Question

我正在尝试使用自动完成功能在多种类型的数据中创建一些搜索功能。我更希望为每个自动填充建议提供自定义视图，以及根据类型对建议进行分组。这些小组也应该分开。

如果我的解释很差，您可以在hotels.com上看到搜索功能的示例：建议根据城市，地标，机场等进行分组。

我一直在关注JQuery UI Autocomplete插件，它似乎能够完成我需要的大部分工作，但我还没有看到任何分组的例子。

由于我的javascript / JQuery技能有点缺乏，我希望有人可以告诉我是否有可能实现我想要的Autocomplete插件，或者是否有其他插件可以做到这一点？我们将非常感谢一个如何完成它的示例/概述。

Answer 1

您可以通过更改默认的_renderMenu函数来覆盖自动填充渲染的方式。我做了类似于你所说的事情（1）返回按类别排序的json结果和（2）覆盖此函数。没有代码可以帮助您具体，但这是我自己的代码中的示例

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

Answer 2

这是@natedavisolds更新后接受的答案，用于Jquery UI 1.10。

  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
      var that = this;
      var currentCategory = "";
      $.each( items, function( index, item ) {
        if (item.category != currentCategory) {
          $('<li/>').addClass('ui-autocomplete-category').html(convert_category(item.category)).appendTo(ul);
          currentCategory = item.category;
        }
        that._renderItemData( ul, item );
      });
    }   
  });

Answer 3

此外，您可以替换：

ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );

with：

ul.append( "<span class='ui-autocomplete-category'>" + item.category + "</span>" );

否则您将在控制台中看到许多错误，例如：n未定义，或项目未定义...

将结果分组到JQuery UI Autocomplete插件？

3 个答案: