Xóa trường biểu mẫu sau khi chọn cho jQuery UI Autocomplete

Tôi đang phát triển một biểu mẫu và sử dụng jQuery UI Autocomplete. Khi người dùng chọn một tùy chọn, tôi muốn lựa chọn đó xuất hiện trong khoảng được nối vào <p>thẻ mẹ . Sau đó, tôi muốn trường xóa thay vì được điền vào vùng chọn.

Tôi có khoảng thời gian xuất hiện tốt, nhưng tôi không thể làm cho sân rõ ràng.

Làm cách nào để bạn hủy hành động chọn mặc định của jQuery UI Autocomplete?

Đây là mã của tôi:

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>");
    }
});

Đơn giản là làm $(this).val("");không hiệu quả. Điều đáng buồn là gần như chức năng chính xác hoạt động tốt nếu tôi bỏ qua tính năng tự động hoàn thành và chỉ thực hiện hành động khi người dùng nhập dấu phẩy như sau:

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

Kết quả cuối cùng thực sự là làm cho tính năng tự động hoàn thành hoạt động với nhiều lựa chọn. Nếu ai đó có bất kỳ đề xuất nào cho điều đó, họ sẽ được hoan nghênh.

Thêm $(this).val(''); return false; vào cuối selectchức năng của bạn để xóa trường và hủy sự kiện :)

Điều này sẽ ngăn không cho giá trị được cập nhật. Bạn có thể xem cách nó hoạt động xung quanh dòng 109 tại đây .

Mã trong đó kiểm tra sai cụ thể:

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

Thay vì trả về false, bạn cũng có thể sử dụng event.preventDefault ().

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

Trả về false là cần thiết trong lệnh gọi lại đã chọn, để làm trống trường. nhưng nếu bạn muốn kiểm soát lại trường, tức là đặt giá trị, bạn phải gọi một hàm mới để thoát ra khỏi ui.

Có lẽ bạn có một giá trị nhanh chóng chẳng hạn như:

var promptText = "Enter a grocery item here."

Đặt nó làm val của phần tử. (về tiêu điểm, chúng tôi đặt thành '').

$("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
}

Nó hoạt động tốt cho tôi.

Sau khi chọn sự kiện, tôi đã sử dụng thay đổi sự kiện.

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

Tôi là người mới bắt đầu!

Thử cái này

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

Tôi vừa giải quyết nó buộc phải mất tập trung:

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