تغيير عرض الأدوات الإكمال التلقائي jQuery-UI بشكل فردي
-
25-09-2019 - |
سؤال
أنا أعمل مع واجهة المستخدم الإكمال التلقائي لـ Moutiple jQuery-UI على صفحة واحدة وأريد أن أكون قادرًا على ضبط عرض كل واحد بشكل فردي. حاليا ، أنا أفعل ذلك مثل هذا:
$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);
هذا ليس حلاً حقًا لأن المستخدم قادر على تشغيل الإكمال التلقائي المختلفة في أوامر مختلفة ، وهذا الرمز يصنعها فقط بناءً على الترتيب الذي تمت إضافته إلى DOM.
عندما يتم تشغيل الإكمال التلقائي ، يبدو أنه يخلق أ <ul>
ثم ضعه تحت مربع الإدخال الذي أثاره. لسوء الحظ ، لا يمكنني العثور على أي معرفات فريدة من نوعها التي تم إنشاؤها <ul>
للالتفاف على وتطبيق بعض CSS.
مشكلتي مختلفة عن هذا, ، نظرًا لأنني أستخدم فقط الإكمال التلقائي الافتراضي ، وليس الإكمال التلقائي.
أيضا ، الحفر في الإكمال التلقائي <ul>
ومطابقة عروض مربع الإكمال التلقائي المختلفة مع القيم الموجودة داخل القائمة لا تعمل أيضًا ، حيث يتم إنشاء القيم ديناميكيًا.
أيه أفكار؟
المحلول
لقد حلت هذه المشكلة باستخدام الحدث "المفتوح" المتاح. كنت بحاجة إلى وسيلة لتعيين العرض ديناميكيًا ، إلى جانب عناصر أخرى ولم أرغب في الحصول على علامة إضافية.
$('#input').autocomplete({
source: mysource,
appendTo: '#div',
open: function() { $('#div .ui-menu').width(300) }
});
نصائح أخرى
أنا أحب إجابة لوكي. ولكن إذا كنت في موقف لا يمكنك فيه استخدام ميزة AppendTO (يمكن أن يكون بسبب التدفق الخفي وما إلى ذلك) ، فيمكنك استخدام الكود أدناه للتأكد من أنك تقوم بإجراء تغييرات على القائمة الصحيحة.
$('#input').autocomplete({
source: mysource,
open: function() {
$('#input').autocomplete("widget").width(300)
}
});
المرجع: http://docs.jquery.com/ui/autocomplete#method-widget
إذا كان لديك عناصر تحكم متعددة تستخدم الإكمال التلقائي ، فإن الحل الأنيق المعقول هو استرداد 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
حدث.
يمكنك الحصول على أداة "ui-menu" المرتبطة بـ <input>
وجود إكمال تلقائي فيما يتعلق $('#myinput').data("autocomplete").menu
. لذلك لتغيير العرض الذي يمكنك استخدامه
$('#myinput').autocomplete({
source: yourUrlOrOtherSource,
open: function () {
$(this).data("autocomplete").menu.element.width(80);
}
});
يمكنك لف مربع الإدخال الذي يؤدي إلى الإكمال التلقائي في 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>
دون استخدام رمز 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}
هذا تجنبني المزيد من الاختراقات ، آمل أن يساعد ذلك!
يعجبني إجابة Martin Lögdberg ، لكن إذا كنت تستخدم عروضًا ثابتة الحجم بدلاً من القيام ببعض الرياضيات الفاخرة على النتائج التي تم إرجاعها لتعيين العرض ، فيمكنك أيضًا تعيين العرض في CSS
ul .ui-autocomplete {
width: 50%;
}
تحسن في إجابة مارتن لوجدبرغ. لقد عمل هذا بشكل أفضل بالنسبة لي لأنه كان لدي العديد من مربعات النص على الصفحة
$('.some-class').each(function(){
var txt = $(this);
txt.autocomplete({
source: mysource,
open: function() {
txt.autocomplete("widget").width(txt.outerWidth());
}
});
});
قراءة واجهة برمجة التطبيقات ، أنا فقط أضيف فصلًا واجهة المستخدم إلى الوالد div من بلدي إدخال, وهذا يعمل بشكل جيد.
<div class="ui-front">
<label for="autosample" class="required">example</label>
<input name="autosample" class="default-autocomplete" type="text">
</div>
يرى هنا :
...] سيتم فحص آباء حقل الإدخال لفئة من واجهة المستخدم. إذا تم العثور على عنصر مع فئة واجهة واجهة المستخدم ، سيتم إلحاق القائمة بهذا العنصر. بغض النظر عن القيمة ، إذا لم يتم العثور على عنصر ، سيتم إلحاق القائمة بالجسم.
يحدد العنصر الملحق موضع وعرض القائمة.
اعتبارًا من jQuery UI 1.10 ، تم إعادة كتابة عنصر واجهة التحكم التلقائية باستخدام مصنع القطعة. كجزء من ذلك ، يحتوي الإكمال الذاتي الآن على ملف _resizeMenu
نقطة التمديد ، والتي تسمى عند تغيير حجم القائمة قبل العرض.
$('#input').autocomplete({
source: mysource,
appendTo: '#div',
_resizeMenu: function() {
this.menu.element.outerWidth( 500 );
}
});
تمكنت من حل هذا باستخدام CSS عن طريق إضافة تعويم إلى القائمة الإكمال التلقائي.
.ui-autocomplete { float: left; }
منذ وضع القائمة الإكمال التلقائي absolute
وطفل مباشر من <body>
. أعتقد أنه يحصل على أقصى عرض من الجسم ، ولأنه لا يمكن عرضه على أنه لا يمكن عرضه على أنه كتلة مضمنة لتجنب تناول جميع المساحة المتاحة.
ايضا .ui-autocomplete { width: 1%; }
يبدو أنه يعمل.