باستخدام HTML في jQuery UI الإكمال التلقائي

Question

قبل jquery ui 1.8.4 يمكنني استخدام لغة البرمجة في مجموعة JSON التي قمت ببنيها للعمل مع الإكمال الذاتي.

تمكنت من فعل شيء مثل:

$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"}]

Answer 1

أضف هذا إلى الكود الخاص بك:

).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")

Answer 2

تم توثيق هذا أيضًا في وثائق الإكمال التلقائي JQuery-UI على:http://api.jqueryui.com/autocomplete/#option-source

الحيلة هي:

1. استخدم ملحق واجهة المستخدم هذا jQuery
2. ثم في تمريرة خيار الإكمال التلقائي autocomplete({ html:true});
3. الآن يمكنك تمرير HTML <div>sample</div> في "التسمية" حقل إخراج JSON للإكمال التلقائي.

إذا كنت لا تعرف كيفية إضافة المكون الإضافي إلى واجهة المستخدم jQuery ثم:

1. احفظ المكون الإضافي (امتداد Scott González 'HTML) في ملف JS أو قم بتنزيل ملف JS.
2. لقد قمت بالفعل بإضافة البرنامج النصي JQuery-UI الإكمال التلقائي في صفحة HTML الخاصة بك (أو ملف JQuery-Ui JS). أضف هذا البرنامج النصي المكون الإضافي بعد ملف JavaScript الإكمال التلقائي.

Answer 3

لا ينصح بهذا الحل ولكن يمكنك فقط تحرير ملف المصدر 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)},

Answer 4

واجهت نفس المشكلة ، لكنني أفضل استخدام مجموعة ثابتة من الخيارات لخياري ("المصدر") للأداء. إذا جربت ذلك بهذا الحل ، فستجد أن JQuery يبحث على الملصق بأكمله أيضًا.

على سبيل المثال ، إذا قمت بتزويدها:

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

ثم ستطابق كتابة "Span" كلا النتائج ، للحصول عليها للبحث في القيمة التي تجاوزت فقط $.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.

Answer 5

لقد ذكرت القضية من قبل كلارنس. كنت بحاجة لتوريد لغة البرمجة لإظهار مظهر جميل مع أنماط وصور. هذا أدى إلى كتابة "div" مطابقة جميع العناصر.

ومع ذلك ، فإن قيمتي كانت فقط رقم معرف ، لذلك لم أستطع السماح للبحث بالهرب من ذلك. كنت بحاجة إلى البحث للبحث عن عدة قيم ، وليس فقط رقم المعرف.

كان الحل الخاص بي هو إضافة حقل جديد يحتفظ فقط بقيم البحث والتحقق من ذلك في ملف واجهة المستخدم jQuery. وهذا هو ما فعلته:

(هذا على 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". إذا كان هناك ، فإنه يستخدم هذا الحقل فقط. إذا لم يكن هناك ، فهو يعمل كالمعتاد.

ثم يمكنك استخدام الإكمال التلقائي تمامًا كما كان من قبل ، إلا أنه يمكنك إضافة مفتاح "SearchOnly" إلى كائن JSON الخاص بك.

وآمل أن يساعد شخص ما!