jQuery UI Otomatik Tamamlama Kategorisi Kategori Başlıkları Nasıl Atlanılır

Question

Web uygulamasında bir otomatik tamamlama alanı var ve bir ok tuşu olduğunda kategori alanlarını otomatik olarak atlayarak alanın kullanılabilirliğini artırmanın bir yolunu arıyorum mevcut seçenekleri aşağı kaydırmak için kullanılır (kısmi bir arama terimi yazdıktan sonra).

Örneğin, bir kullanıcı "an" yazmaya başladığında, otomatik tamamlama, her birinde öğelerle birlikte iki kategoriyi gösterir. Kullanıcı, listede "Kişiler" altındaki öğelerden birini seçmek istiyor. Listede aşağı doğru hareket etmek için ok tuşunu kullanırlar. Şu anda, bu kod, kategorileri sonuçlarda bir liste öğesi olarak ekler. Ok tuşlarını kullanırken, bir sonucu vurgulamak ve seçmek için bunları iletmelisiniz. Uygulamanın otomatik olarak bu kategori başlıklarını atlayabilmesi mümkün mü?

$.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

Bu hat:

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

soruna neden olan.

Internally

, widget li seçilebilir gerçek bir menü öğesi olup olmadığını ayırt etmek için bir sınıfa ui-menu-item ile liste öğeleri kullanır. 'Aşağı' tuşuna bastığınızda, pencere öğesi bir sonraki öğeyi ui-menu-item sınıfında bulur ve ona gider.

sınıf çıkarın ve kodunuzu siz istediğiniz gibi çalışır: onun'çalışma İşte

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

:

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

Answer 2

kabul cevap en son sürümlerini çalışmıyor yana jQueryUI (> 1.10.4) Hacker'ımı göndereceğim, belki birisi yararlı bulacaktır. jQueryUI işlevlerin bazıları ayrıca jquery zorlamak için geçersiz kılınabilir gereken

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

: Ben yeni bir sınıf ekledi kategori ekleme yaparken ben jQueryUI 1.12.0

kullanıyorum

i "categoryItem" adını "categoryItem" sınıfıyla öğeleri yok saymak için (iki satır değiştirilir).

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