JQuery UI স্বয়ংক্রিয়রূপে এইচটিএমএল ব্যবহার করা

Question 1

JQuery UI 1.8.4 এর আগে আমি স্বতঃপূরণ নিয়ে কাজ করার জন্য তৈরি জেএসএন অ্যারেতে HTML ব্যবহার করতে পারি।

আমি যেমন কিছু করতে সক্ষম হয়েছিল:

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

এটি ড্রপ ডাউনটিতে লাল পাঠ্য হিসাবে প্রদর্শিত হবে।

1.8.4 হিসাবে যে কাজ করে না। আমি http://dev.jqueryui.com/ticket/5275 পেয়েছি যা আমাকে এখানে কাস্টম এইচটিএমএল উদাহরণটি ব্যবহার করতে বলে যা আমার ভাগ্য নেই luck

এই পরামর্শটি দেখাতে আমি কীভাবে এইচটিএমএল পাব?

আমার 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>

আমার জেএসওন অ্যারেতে নিম্নলিখিতগুলির মতো এইচটিএমএল রয়েছে:

[{"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 স্ব-পরিপূর্ণ স্ক্রিপ্ট যুক্ত করেছেন (বা 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আপনাকে লেবেল, মান বা আইডিতে অনুসন্ধান করার অনুমতি দেয় to

আপনি স্বতঃসিদ্ধের উত্স পরামিতি হিসাবে যতগুলি কী / মান সরবরাহ করতে পারেন।

পিএস: আসল প্যারামিটারটি c.label||c.value||c।

Question 6

আমি ক্লারেন্স দ্বারা উল্লিখিত সমস্যা ছিল। শৈলী এবং চিত্রগুলির সাথে একটি সুন্দর চেহারা তৈরি করার জন্য আমার এইচটিএমএল সরবরাহ করা দরকার । এর ফলে সমস্ত উপাদানগুলির সাথে মিলে "ডিভ" টাইপ হয়েছিল।

তবে, আমার মানটি কেবল একটি আইডি নম্বর ছিল, তাই আমি অনুসন্ধানটি কেবল এটির থেকে চালিয়ে যেতে দিতে পারি না। আইডি নম্বর নয়, বেশ কয়েকটি মান সন্ধান করার জন্য আমার অনুসন্ধান দরকার needed

আমার সমাধানটি ছিল এমন একটি নতুন ক্ষেত্র যুক্ত করা যা কেবল অনুসন্ধানের মানগুলিকে ধারণ করে এবং 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" ক্ষেত্রের জন্য চেক যুক্ত করেছি। যদি এটি সেখানে থাকে তবে এটি কেবল সেই ক্ষেত্রটি ব্যবহার করে। এটি যদি না থাকে তবে এটি স্বাভাবিক হিসাবে কাজ করে।

তারপরে আপনি স্বতঃপূরণটি ঠিক আগের মতোই ব্যবহার করেন, আপনি যদি আপনার জেএসওএন অবজেক্টে "অনুসন্ধানীয়" কী যুক্ত করতে পারেন তবে।

আমি আশা করি যে কাউকে সাহায্য করে!