[Binding] ربط jQuery UI الإكمال التلقائي باستخدام .live ()


Answers

تضيف وظيفة الإكمال الذاتي jQuery UI تلقائيًا "ui-autocomplete-input" إلى العنصر. أنصحك بالربط المباشر بالعنصر المعني دون التركيز على فئة "ui-autocomplete-input" لمنع إعادة الربط في كل حدث لحدث keydown داخل هذا العنصر.

$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) {
    $(this).autocomplete(options);
});

تصحيح

جوابي الآن غير محدث منذ jQuery 1.7 ، انظر تعليق ناثان ستروتز لاستخدامه مع الصيغة .on() الجديدة.

Question

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

لدي بعض مربعات النص التي يتم إنشاؤها ديناميكيًا عبر JS ، لذلك أحتاج إلى ربط جميع فصولهم بإكمال تلقائي. نتيجة لذلك ، أحتاج إلى استخدام الخيار .live () الجديد.

على سبيل المثال ، لربط جميع العناصر بفئة من .foo الآن والمستقبل الذي تم إنشاؤه:

$('.foo').live('click', function(){
  alert('clicked');
});

يستغرق (ويتصرف) نفس .bind (). ومع ذلك ، أريد ربط autocomplete ...

هذا لا يعمل:

$('.foo').live('autocomplete', function(event, ui){
  source: 'url.php' // (surpressed other arguments)
});

كيف يمكنني استخدام .live () لربط autocomplete؟

تحديث

تأكد من ذلك مع Framer:

$(function(){
  $('.search').live('keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});



بعد قراءة واختبار إجابات كل شخص آخر قمت بتحديثه للإصدار الحالي من JQuery وقمت ببعض التعديلات.

مشكلة استخدام keydown باعتبارها الحدث الذي يستدعي .autocomplete() هو أنه فشل في الإكمال التلقائي لهذا الحرف الأول المكتوب. استخدام التركيز هو الخيار الأفضل.

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

كودي النهائي هو كما يلي:

$(document).on('focus.autocomplete', '#myAutocomplete', function(e){
    $(this).autocomplete(autocompleteOptions);
    $(document).off('focus.autocomplete', '#myAutocomplete');
});



لا يمكنك. .live () يدعم فقط أحداث JavaScript الفعلية ، وليس أي حدث مخصص. هذا هو وجود قيود أساسية لكيفية العمل .live ().




لقد لاحظت أنك قمت بتحرير مشاركتك بهذه الإجابة. كان من الواضح بالنسبة لي لذلك أنا نشرها أدناه للآخرين. شكرا لكم.

$(function() 
{
  $('.search').live('keyup.autocomplete', function()
  { 
    $(this).autocomplete({ source : 'url.php' }); 
  });
});



للحصول على الإكمال التلقائي للعمل عند التحميل بشكل ديناميكي للحدث on() المستخدم في jQuery> 1.7 ، فإن استخدام الصيغة ناثان ستروتز يقدم في تعليقه:

$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) {
    $(this).autocomplete(options)
});

حيث .my-field هو محدد لعنصر الإدخال التلقائي الخاص بك.




يمكنك فقط وضع الإكمال التلقائي داخل الحدث المباشر للإدخال ، على النحو التالي:

$('#input-element').live('input', function(){
  
$("#input-element").autocomplete(options);

});




Links