2013-10-18 9 views
12

पर एक कस्टम क्लास जोड़ना मैं ui-autocomplete div में कस्टम क्लास कैसे जोड़ूं? मेरे पृष्ठ पर लोड होने वाले कई स्वत: पूर्ण विजेट हैं और उनमें से कुछ ड्रॉप डाउन को अलग-अलग स्टाइल करने की आवश्यकता है, इसलिए मैं केवल ui-स्वत: पूर्ण वर्ग को संपादित नहीं कर सकता। मैं jQuery UI combobox कोड (http://jqueryui.com/autocomplete/#combobox) के साथ काम कर रहा हूं और, उस कोड को बदलकर, मैं बनाए गए ui-autocomplete div में एक वर्ग जोड़ना चाहता हूं। इस विधि कस्टम वर्गों को जोड़ने के लिएjQuery UI के ui-autocomplete Combobox Div

उत्तर

18
$("#auto").autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("your_custom_class"); 
+4

इनपुट में कक्षा जोड़ती है, लेकिन संबद्ध स्वत: पूर्ण सूची नहीं। – user1032531

+1

प्रश्न स्टाइल की आवश्यकता वाले 'ड्रॉप डाउन' को संदर्भित करता है और यह केवल इनपुट को संशोधित करता है। – karmasponge

+0

इस सहायता के लिए धन्यवाद आदमी –

0

उपयोग बॉक्स

_renderMenu: function(ul, items) { 
    var that = this; 
    $.each(items, function(index, item) { 
     that._renderItemData(ul, item); 
    }); 
    $(ul).find("li:odd").addClass("odd"); 
} 
+0

मैंने अपने कोड पर सटीक स्निपेट जोड़ा और कुछ भी नहीं हुआ। यह विधि कब चलती है? मैंने _create के तुरंत बाद जोड़ा: विधि – Colin

10

देरी के लिए खेद ड्रॉप डाउन करने के लिए)। नीचे कोड पर एक नज़र डालें।

$("#auto").autocomplete({ 
    classes: { 
     "ui-autocomplete": "your-custom-class", 
    }, 
    ... 
}); 

इसका मतलब है कि जहाँ भी jQuery यूआई ui-autocomplete वर्ग पर लागू होता है यह भी your-custom-class लागू करना चाहिए:

$(function() { 
    $("#auto").autocomplete({ 
     source: ['aa', 'bb', 'cc', 'dd'] 
    }).data("ui-autocomplete")._renderItem = function (ul, item) { 

     ul.addClass('customClass'); //Ul custom class here 

     return $("<li></li>") 
     .addClass(item.customClass) //item based custom class to li here 
     .append("<a href='#'>" + item.label + "</a>") 
     .data("ui-autocomplete-item", item) 
     .appendTo(ul); 
    }; 
}); 
4

सीधे शब्दों में classes तर्क का उपयोग करें।

यह किसी भी jQuery UI विजेट के लिए प्रासंगिक है, न केवल स्वतः पूर्ण। documentation देखें।