在JQuery UI自动完成插件中对结果进行分组? [英] Grouping results in JQuery UI Autocomplete plugin?

问题描述

我正在尝试使用自动完成功能来跨多种类型的数据创建一些搜索功能.对于每个自动完成建议以及根据类型进行分组的建议，我都希望使用自定义视图.这些组也应该分开.

I'm trying to create some search functionality across several types of data, with autocomplete. I'd prefer to have custom views for each autocomplete suggestion, as well as for the suggestions to be grouped according to type. The groups should also be separated.

如果我的解释不好，您可以在hotels.com上查看搜索功能的示例:建议根据城市，地标，机场等分组.

If my explanation is poor, you can see the search functionality on hotels.com for an example: The suggestions are grouped according to city, landmarks, airports etc.

我一直在研究JQuery UI Autocomplete插件，它似乎能够满足我的大部分需求，但是我还没有看到任何分组示例.

I've been looking at the JQuery UI Autocomplete plugin, and it seems to be able to do most of what I need, but I have not seen any example of the grouping.

由于我的javascript/JQuery技能有点缺乏，我希望这里的人可以告诉我是否有可能实现我想要的自动完成插件，或者是否还有其他插件可以解决这个问题?一个示例/概述如何完成它也将不胜感激.

Since my javascript/JQuery skills are a bit lacking, I'm hoping someone here could tell me whether it is possible to achieve what I want Autocomplete plugin, or if there's some other plugin that might do the trick? An example/outline of how it can be done would also be greatly appreciated.

推荐答案

您可以通过更改默认的_renderMenu函数来覆盖自动完成渲染的方式.我做了与您在说的类似的事情:(1)返回按类别排序的json结果，(2)覆盖此函数.没有代码可以专门为您提供帮助，但这是我自己的代码中的一个示例

You can overwrite the way that autocomplete renders by changing the default _renderMenu function. I did something similar to what you are talking about by (1) returning the json results sorted by category and (2) overwriting this function. No code to help you specifically but here is an example from my own code

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

这篇关于在JQuery UI自动完成插件中对结果进行分组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！