jQuery UI自動完成類別如何跳過類別頭文件

Question

我在我的web應用程序中有一個工作的自動填充字段，我正在尋找一種方式來增加字段的可用性，當某個箭頭鍵以某種方式自動跳過分類字段時用於向下滾動可用選項（輸入部分搜索詞後）。

例如，如果用戶開始輸入「an」，則自動完成將顯示兩個類別，每個類別都包含項目。用戶想要選擇「人員」下列表中的一個項目。他們使用箭頭鍵向下移動列表。目前，此代碼將結果中的類別作爲列表項插入。使用箭頭鍵時，必須移動它們以突出顯示並選擇結果。任何方式應用程序可以自動跳過這些類別標題？

$.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-menu-item ui-category'>" + item.category + "</li>"); 
        currentCategory = item.category; 
       } 
       self._renderItem(ul, item); 
      }); 
     } 
    }); 

    var data = [ 
     { 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" } 
    ]; 

    $("#textfield").catcomplete({ 
     source: data, 
     select: function(event, ui) { 
      window.location.hash = "id_"+escape(ui.item.id); 
     } 
    }); 

Answer 1

這條線：

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

引起的問題。

Internally，小部件使用具有類ui-menu-item的列表項來區分li是否是可以選擇的實際菜單項。當您按下「向下」鍵時，小部件會找到類ui-menu-item的下一個項目並移至該項目。

刪除類和你的代碼工作像你想讓它：

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

這是工作：

http://jsfiddle.net/andrewwhitaker/pkFCF/

Answer 2

由於接受的答案不工作的最新版本jQueryUI（> 1.10.4）我會發布我的黑客，也許有人會覺得它有用。

我使用jQueryUI的1.12.0

雖然附加我增加了新的類屬，我把它叫做「categoryItem」：

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

一些jQueryUI的功能還需要重寫給力的jQuery忽略具有「categoryItem」類的項目（兩行更改）。

$.widget("ui.menu", $.extend({}, $.ui.menu.prototype, { 
    refresh: function() { 
    var menus, items, newSubmenus, newItems, newWrappers, 
     that = this, 
     icon = this.options.icons.submenu, 
     submenus = this.element.find(this.options.menus); 

    this._toggleClass("ui-menu-icons", null, !!this.element.find(".ui-icon").length); 
    // Initialize nested menus 
    newSubmenus = submenus.filter(":not(.ui-menu)") 
     .hide() 
     .attr({ 
      role: this.options.role, 
      "aria-hidden": "true", 
      "aria-expanded": "false" 
     }) 
     .each(function() { 
      var menu = $(this), 
       item = menu.prev(), 
       submenuCaret = $("<span>").data("ui-menu-submenu-caret", true); 

      that._addClass(submenuCaret, "ui-menu-icon", "ui-icon " + icon); 
      item 
       .attr("aria-haspopup", "true") 
       .prepend(submenuCaret); 
      menu.attr("aria-labelledby", item.attr("id")); 
     }); 

    this._addClass(newSubmenus, "ui-menu", "ui-widget ui-widget-content ui-front"); 

    menus = submenus.add(this.element); 
    items = menus.find(this.options.items); 

    // Initialize menu-items containing spaces and/or dashes only as dividers 
    items.not(".ui-menu-item").each(function() { 
     var item = $(this); 
     if (that._isDivider(item)) { 
      that._addClass(item, "ui-menu-divider", "ui-widget-content"); 
     } 
    }); 

    // Don't refresh list items that are already adapted 
    newItems = items.not(".ui-menu-item, .ui-menu-divider").not(".categoryItem"); 
    newWrappers = newItems.children() 
     .not(".ui-menu") 
      .uniqueId() 
      .attr({ 
       tabIndex: -1, 
       role: this._itemRole() 
      }); 
    this._addClass(newItems, "ui-menu-item") 
     ._addClass(newWrappers, "ui-menu-item-wrapper"); 

    // Add aria-disabled attribute to any disabled menu item 
    items.filter(".ui-state-disabled").attr("aria-disabled", "true"); 

    // If the active item has been removed, blur the menu 
    if (this.active && !$.contains(this.element[ 0 ], this.active[ 0 ])) { 
     this.blur(); 
    } 

}, 
    _move: function(direction, filter, event) { 
    var next; 
    if (this.active) { 
     if (direction === "first" || direction === "last") { 
      next = this.active 
       [ direction === "first" ? "prevAll" : "nextAll" ](".ui-menu-item") 
       .eq(-1); 
     } else { 
      next = this.active 
       [ direction + "All" ](".ui-menu-item") 
       .eq(0); 
     } 
    } 
    if (!next || !next.length || !this.active) { 
     next = this.activeMenu.find(this.options.items).not(".categoryItem")[ filter ](); 
    } 

    this.focus(event, next); 
} 
}));