تغيير عرض الأدوات الإكمال التلقائي jQuery-UI بشكل فردي

Question

أنا أعمل مع واجهة المستخدم الإكمال التلقائي لـ Moutiple jQuery-UI على صفحة واحدة وأريد أن أكون قادرًا على ضبط عرض كل واحد بشكل فردي. حاليا ، أنا أفعل ذلك مثل هذا:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

هذا ليس حلاً حقًا لأن المستخدم قادر على تشغيل الإكمال التلقائي المختلفة في أوامر مختلفة ، وهذا الرمز يصنعها فقط بناءً على الترتيب الذي تمت إضافته إلى DOM.

عندما يتم تشغيل الإكمال التلقائي ، يبدو أنه يخلق أ <ul> ثم ضعه تحت مربع الإدخال الذي أثاره. لسوء الحظ ، لا يمكنني العثور على أي معرفات فريدة من نوعها التي تم إنشاؤها <ul> للالتفاف على وتطبيق بعض CSS.

مشكلتي مختلفة عن هذا, ، نظرًا لأنني أستخدم فقط الإكمال التلقائي الافتراضي ، وليس الإكمال التلقائي.

أيضا ، الحفر في الإكمال التلقائي <ul> ومطابقة عروض مربع الإكمال التلقائي المختلفة مع القيم الموجودة داخل القائمة لا تعمل أيضًا ، حيث يتم إنشاء القيم ديناميكيًا.

أيه أفكار؟

Answer 1

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

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});

Answer 2

أنا أحب إجابة لوكي. ولكن إذا كنت في موقف لا يمكنك فيه استخدام ميزة AppendTO (يمكن أن يكون بسبب التدفق الخفي وما إلى ذلك) ، فيمكنك استخدام الكود أدناه للتأكد من أنك تقوم بإجراء تغييرات على القائمة الصحيحة.

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

المرجع: http://docs.jquery.com/ui/autocomplete#method-widget

Answer 3

إذا كان لديك عناصر تحكم متعددة تستخدم الإكمال التلقائي ، فإن الحل الأنيق المعقول هو استرداد widget تعلق على عنصر التحكم في اللحظة الأخيرة وتعديل CSS لها:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

رأي العرض التوضيحي.

كما ذكر أعلاه ، يتم حساب عرض القائمة الإكمال التلقائي في اللحظة الأخيرة ، وبالتالي يجب تعديله في open حدث.

Answer 4

يمكنك الحصول على أداة "ui-menu" المرتبطة بـ <input> وجود إكمال تلقائي فيما يتعلق $('#myinput').data("autocomplete").menu. لذلك لتغيير العرض الذي يمكنك استخدامه

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

Answer 5

يمكنك لف مربع الإدخال الذي يؤدي إلى الإكمال التلقائي في DIV ، وإعطاء DIV معرّفًا محددًا ، ثم إلحاق AUTO CONFER UL بهذا div بدلاً من جسم المستند. بهذه الطريقة يمكنك استهدافها باستخدام CSS بناءً على Div.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script> 

Answer 6

دون استخدام رمز JavaScript إضافي ، يمكنك استخدام خط CSS بسيط:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

فلماذا يعمل هذا ناقص العرض?

ببساطة لأن width يتم الكتابة فوقها من قبل JS ، وأحيانًا حتى مع الحلول التي تستخدم open: function(event, ui) { ... } (مثل إجابة Rkever, التي لم تنجح في حالتي). لكن، min-width لا يكتب, ، لذلك يأتي في متناول يدي.

أيضا ، إذا قمت بذلك لا تريد الاستخدام !important, ، يمكنك مزيد من التفصيل القاعدة مع الفصول المتبقية:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

هذا تجنبني المزيد من الاختراقات ، آمل أن يساعد ذلك!

Answer 7

يعجبني إجابة Martin Lögdberg ، لكن إذا كنت تستخدم عروضًا ثابتة الحجم بدلاً من القيام ببعض الرياضيات الفاخرة على النتائج التي تم إرجاعها لتعيين العرض ، فيمكنك أيضًا تعيين العرض في CSS

ul .ui-autocomplete {
  width: 50%;
}

Answer 8

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

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

Answer 9

قراءة واجهة برمجة التطبيقات ، أنا فقط أضيف فصلًا واجهة المستخدم إلى الوالد div من بلدي إدخال, وهذا يعمل بشكل جيد.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

يرى هنا :

...] سيتم فحص آباء حقل الإدخال لفئة من واجهة المستخدم. إذا تم العثور على عنصر مع فئة واجهة واجهة المستخدم ، سيتم إلحاق القائمة بهذا العنصر. بغض النظر عن القيمة ، إذا لم يتم العثور على عنصر ، سيتم إلحاق القائمة بالجسم.

يحدد العنصر الملحق موضع وعرض القائمة.

Answer 10

اعتبارًا من jQuery UI 1.10 ، تم إعادة كتابة عنصر واجهة التحكم التلقائية باستخدام مصنع القطعة. كجزء من ذلك ، يحتوي الإكمال الذاتي الآن على ملف _resizeMenu نقطة التمديد ، والتي تسمى عند تغيير حجم القائمة قبل العرض.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

Answer 11

تمكنت من حل هذا باستخدام CSS عن طريق إضافة تعويم إلى القائمة الإكمال التلقائي.

.ui-autocomplete { float: left; }

منذ وضع القائمة الإكمال التلقائي absolute وطفل مباشر من <body>. أعتقد أنه يحصل على أقصى عرض من الجسم ، ولأنه لا يمكن عرضه على أنه لا يمكن عرضه على أنه كتلة مضمنة لتجنب تناول جميع المساحة المتاحة.

ايضا .ui-autocomplete { width: 1%; } يبدو أنه يعمل.