مسح حقل النماذج بعد تحديد الإكمال التلقائي لـ jQuery UI

Question

أقوم بتطوير نموذج ، وأستخدم الإكمال التلقائي 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>");
    }
});

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

Answer 1

يضيف $(this).val(''); return false;حتى نهاية الخاص بك select وظيفة لمسح الحقل وإلغاء الحدث :)

هذا سيمنع القيمة من التحديث. يمكنك أن ترى كيف يعمل حول الخط 109 هنا.

الكود الموجود هناك يتحقق من FALSE على وجه التحديد:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

Answer 2

بدلاً من الإرجاع 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();
}

Answer 3

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

ربما لديك قيمة سريعة مثل:

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
}

Answer 4

إنه يعمل بشكل جيد بالنسبة لي.

بعد حدث محدد ، استخدمت تغيير الحدث.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

انا مبتدئ!

Answer 5

جرب هذا

select: function (event, ui) {
    $(this).val('');
    return false;       
}

Answer 6

لقد حلت للتو إجبار على فقدان التركيز:

$('#select_id').blur();
printResult();