在JQuery UI Autocomplete插件中分組結果？

我試圖創建跨多種類型的數據的一些搜索功能，自動完成用。我更願意爲每個自動填充建議提供自定義視圖，以及根據類型對建議進行分組。這些團體也應該分開。在JQuery UI Autocomplete插件中分組結果？

如果我的解釋是可憐的，你可以看到hotels.com搜索功能爲例：該建議是根據城市分組，地標，機場等

我一直在尋找的JQuery用戶界面自動完成插件，它似乎能夠完成我所需要的大部分功能，但我沒有看到任何分組示例。

由於我的javascript/JQuery技能有點欠缺，我希望有人能告訴我是否有可能實現我想要的自動補全插件，或者如果有其他插件可以做到這一點？一個示例/大綱如何可以完成也將不勝感激。

2011-08-20 rogerkk

自動完成類別例子聽起來接近你所描述的：http://jqueryui.com/demos/autocomplete /＃categories查看源代碼，瞭解他們如何設置示例。如果您正在從數據庫中提取數據，只需將'category' var添加到返回的結果中即可。然後natedavisolds的例子會讓你得到你需要的其餘部分。 –

啊。儘管看起來不像，但我一直在瀏覽演示，但顯然我錯過了那一個。謝謝！ – rogerkk

您可以覆蓋該自動完成渲染通過更改默認_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); 
      }); 
     } 
    });

來源

2011-08-21 00:28:21 natedavisolds

感謝您的回答，您對如何找出所選建議的類別有任何想法嗎？請看看我的問題http://stackoverflow.com/questions/32621273/how-to-find-out-the-category-of-selected-element-in-autocomplete – Jack

的例子這是@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); 
     }); 
    } 
    });

來源

2013-08-12 17:12:01 Stephen

什麼功能convert_category（）？ – Weinz

我試過了上面的答案。然而，一個問題是，如果該類別未被排序，例如

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用戶界面自動完成分組創造了工作演示。這可以對商品進行分類，即使商品的類別不是按照排序順序。

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("<li class='ui-autocomplete-group'>" + category + "</li>"); 
 
      $.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; 
 
}

<input id="tags" type="text" />

來源

2015-08-26 15:44:17 JoyceJi

，此外，你可能會取代：

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

有：

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

否則你會看到許多錯誤，在控制檯中，如：n是不確定的，或者產品沒有定義...

來源

2016-12-29 12:48:37

在JQuery UI Autocomplete插件中分組結果？

回答

相關問題