Jquery स्वत: पूर्ण - लिस्टिंग

Question

मैं इस प्लगइन का जिक्र कर रहा हूँ परिणाम के लिए कस्टम एचटीएमएल: http://jqueryui.com/demos/autocomplete/

तो परिणाम के लिए मूल संरचना

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 3</a> 
    </li> 
</ul> 

है मैं कुछ इस तरह देखने के लिए अंदर लिंक बनाने की जरूरत है :

<a class="myclass" customattribute="something"> The item </a> 

कृपया मुझे एकमात्र समाधान नहीं बताया यह प्लगइन संपादित करने के लिए क्योंकि मैं साइट पर सभी पूर्ण हो जाता है के लिए एक ही प्रारूप नहीं करना चाहती।

Answer 1

आप (प्रश्न में स्वत: पूर्ण के लिए) _renderItem विधि प्रतिस्थापित करने की आवश्यकता:

$("selector").autocomplete({ ... }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>") 
      .appendTo(ul); 
    }; 

(यह मानते हुए अपने source एक संपत्ति customattribute बुलाया में items)

जैसा कि इस उदाहरण में दिखाया गया: http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

आप "ओपन" ईवेंट के साथ विशेषताओं को जोड़ने का प्रयास कर सकते हैं:

$(".selector").autocomplete({ 
    open: function(event, ui) { 
     var jArrEl = $("a.ui-corner-all"); 
     jArrEl.addClass("myclass"); 
     jArrEl.attr("customattribute","something"); 
    } 
}); 

Answer 3

यह jquery-ui स्वत: पूर्ण दस्तावेज में भी लिखा गया है: Jquery-autocomplete।

चाल है: यह jQuery विस्तार

1. उपयोग: github Code

2. तो स्वत: पूर्ण विकल्प पास में

   html:true 
   
   ...autocomplete({ 
   ... 
   html:true 
   ... 
   } 
   

   );

3. अब आप स्वत: पूर्ण के लिए JSON उत्पादन के "लेबल" क्षेत्र में एचटीएमएल (जैसे <div> नमूना </div >) पारित कर सकते हैं।

आप तो JQuery के लिए प्लगइन जोड़ने के बारे में पता नहीं है:

1. एक js फ़ाइल में सहेजें प्लगइन (स्कॉट गोंजालेज 'एचटीएमएल विस्तार) या js फ़ाइल डाउनलोड करें।
2. आप पहले से ही अपने एचटीएमएल पेज (या jquery-ui जेएस फ़ाइल) में jquery-ui स्वत: पूर्ण स्क्रिप्ट जोड़ चुके हैं। उस स्वत: पूर्ण जावास्क्रिप्ट फ़ाइल के बाद इस प्लगइन स्क्रिप्ट जोड़ें।

पोस्ट करने की तिथि: 28 जुलाई, 2013