HTML का उपयोग jQuery UI स्वत: पूर्ण में

Question 1

JQuery UI 1.8.4 से पहले मैं JSON सरणी में HTML का उपयोग कर सकता था जिसे मैंने एक स्वत: पूर्ण के साथ काम करने के लिए बनाया था।

मैं ऐसा कुछ करने में सक्षम था:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

यह ड्रॉप डाउन में लाल पाठ के रूप में दिखाई देगा।

1.8.4 के रूप में जो काम नहीं करता है। मुझे http://dev.jqueryui.com/ticket/5275 मिला, जो मुझे यहां कस्टम HTML उदाहरण का उपयोग करने के लिए कहता है, जिनके साथ मेरा कोई भाग्य नहीं था।

सुझाव में HTML दिखाने के बारे में मैं कैसे जा सकता हूं?

मेरा jQuery है:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

मेरे JSON सरणी में निम्न जैसे HTML शामिल हैं:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Question 2

इसे अपने कोड में जोड़ें:

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

तो आपका कोड बन जाता है:

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

नोट: jQueryUI के पुराने संस्करणों के .data("autocomplete")"बजाय उपयोग करें.data("ui-autocomplete")

Question 3

यह भी jquery-ui स्वत: पूर्ण प्रलेखन में प्रलेखित है: http://api.jqueryui.com/autocomplete/#option-source

चाल है:

इस jQuery UI एक्सटेंशन का उपयोग करें
फिर स्वतः पूर्ण विकल्प में पास करें autocomplete({ html:true});
अब आप <div>sample</div>स्वत: पूर्ण के लिए JSON आउटपुट के "लेबल" फ़ील्ड में html पास कर सकते हैं ।

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

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

Question 4

यह समाधान अनुशंसित नहीं है लेकिन आप स्रोत फ़ाइल jquery.ui.autocomplete.js (v1.10.4) को संपादित कर सकते हैं

मूल:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

फिक्स्ड:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

Question 5

मेरे पास एक ही मुद्दा था, लेकिन मैं प्रदर्शन के लिए अपने विकल्प ('स्रोत') के लिए विकल्पों की एक स्थिर सरणी का उपयोग करना पसंद करता हूं। यदि आपने इस समाधान के साथ प्रयास किया है, तो आप पाएंगे कि jQuery पूरे लेबल पर भी खोज करता है।

अगर आप की आपूर्ति ईजी:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

फिर टाइपिंग "स्पैन" दोनों परिणामों से मेल खाएगा, इसे मूल्य पर खोज करने के लिए केवल $.ui.autocomplete.filterफ़ंक्शन को ओवरराइड करें :

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

आप जो c.valueकुछ भी चाहते हैं, उसके अंतिम पैरामीटर को संपादित कर सकते हैं, उदाहरण के c.id || c.label || c.valueलिए आप लेबल, मान या आईडी पर खोज करने की अनुमति देंगे।

आप स्वत: पूर्ण स्रोत स्रोत के लिए कई कुंजी / मानों को आपूर्ति कर सकते हैं जैसा आप चाहते हैं।

पुनश्च: मूल पैरामीटर है c.label||c.value||c।

Question 6

मेरे पास क्लेरेंस द्वारा उल्लिखित मुद्दा था। मुझे शैलियों और चित्रों के साथ अच्छी उपस्थिति बनाने के लिए HTML की आपूर्ति करने की आवश्यकता थी । इसके परिणामस्वरूप सभी तत्वों का मिलान "div" टाइप किया गया।

हालाँकि, मेरा मूल्य केवल एक आईडी नंबर था, इसलिए मैं खोज को सिर्फ उसी से नहीं चलने दे सकता था। मुझे आईडी नंबर ही नहीं, कई मूल्यों की तलाश के लिए खोज की आवश्यकता थी।

मेरा समाधान एक नया क्षेत्र जोड़ना था जो केवल खोज मान रखता था और jQuery UI फ़ाइल में उसके लिए जाँच करें। यह जो मैंने किया है:

(यह jQuery UI 1.9.2 पर है; यह दूसरों पर समान हो सकता है।)

6008 लाइन पर फ़िल्टर फ़ंक्शन संपादित करें:

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

मैंने "value.searchonly" फ़ील्ड के लिए चेक जोड़ा। यदि यह वहां है, तो यह केवल उस क्षेत्र का उपयोग करता है। यदि यह नहीं है, तो यह सामान्य रूप से काम करता है।

तब आप पहले की तरह स्वतः पूर्ण का उपयोग करते हैं, सिवाय इसके कि आप अपने JSON ऑब्जेक्ट में "सर्चऑन" कुंजी जोड़ सकते हैं।

मुझे आशा है कि किसी की मदद करता है!