ล้างฟิลด์แบบฟอร์มหลังจากเลือกสำหรับการเติมข้อความอัตโนมัติ jQuery UI

ฉันกำลังพัฒนาแบบฟอร์มและใช้การเติมข้อความอัตโนมัติ jQuery UI เมื่อผู้ใช้เลือกตัวเลือกฉันต้องการให้ส่วนที่เลือกปรากฏในช่วงที่ต่อท้าย<p>แท็กหลัก จากนั้นฉันต้องการให้ฟิลด์นี้ชัดเจนแทนที่จะเป็นข้อมูลที่เลือก

ฉันมีสแปนที่ปรากฏได้ดี แต่ไม่สามารถเคลียร์ฟิลด์ได้

คุณจะยกเลิกการดำเนินการเลือกเริ่มต้นของ jQuery UI Autocomplete ได้อย่างไร

นี่คือรหัสของฉัน:

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 ที่นี่

รหัสในนั้นตรวจหาเท็จโดยเฉพาะ:

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

แทนที่จะส่งคืนเท็จคุณยังสามารถใช้ event.preventDefault ()

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}

จำเป็นต้องส่งคืนเท็จภายในการเรียกกลับที่เลือกเพื่อทำให้ฟิลด์ว่างเปล่า แต่ถ้าคุณต้องการควบคุมฟิลด์อีกครั้งเช่นตั้งค่าคุณต้องเรียกใช้ฟังก์ชันใหม่เพื่อแยกออกจาก UI

บางทีคุณอาจมีค่าพร้อมท์เช่น:

var promptText = "Enter a grocery item here."

ตั้งเป็นค่าขององค์ประกอบ (โฟกัสที่เราตั้งค่าเป็น '')

$("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();