مسح حقل النماذج بعد تحديد الإكمال التلقائي لـ jQuery UI
-
23-09-2019 - |
سؤال
أقوم بتطوير نموذج ، وأستخدم الإكمال التلقائي JQuery UI. عندما يحدد المستخدم خيارًا ، أريد أن يتم تحديد التحديد في فترة تم إلحاقها بالوالد <p>
بطاقة شعار. ثم أريد أن يزيل الحقل بدلاً من ملؤه بالاختيار.
لديّ فترة تظهر على ما يرام ، لكن لا يمكنني الحصول على الحقل.
كيف يمكنك إلغاء الإجراء الافتراضي لـ JQuery UI Complete؟
ها هو رمزتي:
var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
source: availableTags,
select: function(){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
}
});
ببساطة $(this).val("");
لا يعمل. ما هو جنون هو أن الوظيفة الدقيقة تقريبًا تعمل بشكل جيد إذا تجاهلت الإكمال التلقائي ، واتخاذ الإجراءات عندما يكتب المستخدم فاصلة على هذا النحو:
$('[id^=item-tag-]').keyup(function(e) {
if(e.keyCode == 188) {
var newTag = $(this).val().slice(0,-1);
$(this).val('');
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
}
});
والنتيجة النهائية الحقيقية هي الحصول على الإكمال التلقائي للعمل مع اختيارات متعددة. إذا كان لدى أي شخص أي اقتراحات لذلك ، فسيكونون موضع ترحيب.
المحلول
يضيف $(this).val(''); return false;
حتى نهاية الخاص بك select
وظيفة لمسح الحقل وإلغاء الحدث :)
هذا سيمنع القيمة من التحديث. يمكنك أن ترى كيف يعمل حول الخط 109 هنا.
الكود الموجود هناك يتحقق من FALSE على وجه التحديد:
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
نصائح أخرى
بدلاً من الإرجاع FALSE ، يمكنك أيضًا استخدام Event.PreventDefault ().
select: function(event, ui){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
event.preventDefault();
}
هناك حاجة إلى إرجاع خطأ ضمن رد الاتصال ، لتفريغ الحقل. ولكن إذا كنت ترغب في التحكم مرة أخرى في الحقل ، أي تعيين القيمة ، عليك الاتصال بوظيفة جديدة لخروج واجهة المستخدم.
ربما لديك قيمة سريعة مثل:
var promptText = "Enter a grocery item here."
اضبطه كعنصر Val. (على التركيز قمنا بتعيين ").
$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
source: availableTags,
select: function(){
$(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
foo.resetter(); // break out //
return false; //gives an empty input field //
}
});
foo.resetter = function() {
$("selector").val(promptText); //returns to original val
}
إنه يعمل بشكل جيد بالنسبة لي.
بعد حدث محدد ، استخدمت تغيير الحدث.
change:function(event){
$("#selector").val("");
return false;
}
انا مبتدئ!
جرب هذا
select: function (event, ui) {
$(this).val('');
return false;
}
لقد حلت للتو إجبار على فقدان التركيز:
$('#select_id').blur();
printResult();