分组结果是JQuery UI Autocomplete插件？

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

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

我一直在看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( "
" + item.category + "
" ); 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) { $('
').addClass('ui-autocomplete-category').html(convert_category(item.category)).appendTo(ul); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); 

Answer 3

我尝试了上面的答案。 然而，一个问题是如果没有订购类别，例如

 var availableTags = [ {category: "favourite", label: "c#", value: "c#", }, {category: "other", label: "Java", value: "Java"}, {category: "favourite", label: "JavaScript", value: "JavaScript"}, {category: "other", label: "J#", value: "J#"}, ]; 

它将创建重复的“最喜欢的”和“其他”类别。

这是我为jquery ui自动完成分组创建的工作演示。 即使项目的类别不按排序顺序，也可以对项目进行分类。

http://jsfiddle.net/jooooice/qua87frd/

 $(function(){ var availableTags = [ {category: "favourite", label: "c#", value: "c#", }, {category: "other", label: "c++", value: "c++"}, {category: "other", label: "c", value: "c"}, {category: "other", label: "Java", value: "Java"}, {category: "favourite", label: "JavaScript", value: "JavaScript"}, {category: "other", label: "J#", value: "J#"}, ]; var customRenderMenu = function(ul, items){ var self = this; var categoryArr = []; function contain(item, array) { var contains = false; $.each(array, function (index, value) { if (item == value) { contains = true; return false; } }); return contains; } $.each(items, function (index, item) { if (! contain(item.category, categoryArr)) { categoryArr.push(item.category); } console.log(categoryArr); }); $.each(categoryArr, function (index, category) { ul.append("
" + category + "
"); $.each(items, function (index, item) { if (item.category == category) { self._renderItemData(ul, item); } }); }); }; $("#tags").tagit({ autocomplete: { source: availableTags, create: function () { //access to jQuery Autocomplete widget differs depending //on jQuery UI version - you can also try .data('autocomplete') $(this).data('uiAutocomplete')._renderMenu = customRenderMenu; } } }) }); 

 .ui-autocomplete-group { line-height: 30px; background-color: #aaa; } .ui-menu-item { padding-left: 10px; } 

Answer 4

此外，您可以替换：

 ul.append( "
" + item.category + "
" ); 

有：

 ul.append( "" + item.category + "" ); 

否则你会在控制台中看到很多错误，例如：n未定义，或项目未定义…