jQuery UI स्वत: पूर्ण श्रेणी कैसे वर्ग हेडर्स छोड़ें




jquery-ui autocomplete (2)

यह रेखा:

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

समस्या पैदा कर रहा है

आंतरिक रूप से , विजेट का उपयोग उन आइटम्स को एक वर्ग ui-menu-item के साथ में अंतर करने के लिए करता है कि क्या li एक वास्तविक मेनू आइटम है जिसे चुना जा सकता है या नहीं। जब आप 'डाउन' कुंजी दबाते हैं, तो विजेट अगले आइटम को ui-menu-item साथ पाता है और इसे ले जाता है।

कक्षा निकालें और आपका कोड काम करता है जैसे आप इसे चाहते हैं:

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

यहां यह काम कर रहा है:

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

मेरे वेब अनुप्रयोग में मेरे पास एक स्वत: पूर्ण काम है और मैं मैदान के प्रयोज्यता को बढ़ाने के लिए एक तरह से स्वचालित रूप से श्रेणी के खेतों को छोड़कर एक तीर कुंजी का उपयोग उपलब्ध विकल्पों को नीचे स्क्रॉल करने के लिए किया जाता है (टाइप करने के बाद आंशिक खोज शब्द)

उदाहरण के लिए, यदि कोई उपयोगकर्ता "एक" टाइप करना शुरू करता है, तो स्वत: पूर्णतया प्रत्येक में आइटम के साथ दो श्रेणियां दिखाएगा उपयोगकर्ता "लोग" के तहत सूची में से एक आइटम का चयन करना चाहता है वे सूची नीचे जाने के लिए तीर कुंजी का उपयोग करते हैं। वर्तमान में, यह कोड परिणामों में श्रेणियों को सूची आइटम के रूप में सम्मिलित करता है। तीर कुंजियों का उपयोग करते समय, आपको हाइलाइट करने और परिणाम का चयन करने के लिए उन्हें पारित करना होगा। कोई भी तरीका स्वचालित रूप से उन श्रेणी शीर्षकों को छोड़ सकता है?

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

चूंकि स्वीकार्य जवाब jQueryUI (> 1.10.4) के नवीनतम संस्करणों में काम नहीं करता है, इसलिए मैं अपना हैक पोस्ट करूंगा, शायद किसी को यह उपयोगी मिलेगा

मैं jQueryUI 1.12.0 का उपयोग कर रहा हूँ

जबकि श्रेणी को जोड़ते हुए मैंने नया वर्ग जोड़ा, मैंने इसे "categoryItem" कहा:

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

कुछ jQueryUI फ़ंक्शंस को "श्रेणी आईटम" वर्ग (दो पंक्तियों को बदल दिया गया है) के साथ आइटमों को अनदेखा करने के लिए jquery को बल देने के लिए ओवरराइड करने की आवश्यकता है।

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




categories