Xóa trường biểu mẫu sau khi chọn cho giao diện người dùng jQuery Tự động hoàn tất

Question

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 để bật vào một khoảng được nối thêm vào thẻ <p> của cha mẹ. Sau đó, tôi muốn lĩnh vực rõ ràng hơn là được dân cư với các lựa chọn.

Tôi có khoảng thời gian xuất hiện tốt, nhưng tôi không thể lấy trường để xóa.

Làm cách nào để hủy tác vụ chọn mặc định của giao diện người dùng jQuery Auto 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 chỉ cần làm $(this).val(""); không hoạt động. Điều gì là bực mình là hầu như các chức năng chính xác hoạt động tốt nếu tôi bỏ qua autocomplete, và chỉ hành động khi người dùng gõ một dấu phẩy như vậy:

$('[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 là làm sao để có được autocomplete để làm việc với nhiều lựa chọn. Nếu ai có bất cứ đề nghị nào về điều đó, họ sẽ được chào đón.

Answer 1

Thêm $(this).val(''); return false; đến hết chức năng select của bạn để xóa lĩnh vực này và hủy bỏ sự kiện này :)

Điều này sẽ ngăn chặn việc giá trị từ đang được cập nhật. Bạn có thể xem nó hoạt động như thế nào around line 109 here.

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

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

Answer 2

trở lại sai là cần thiết trong callback chọn, để trống lĩnh vực này. 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 hàm mới để thoát ra khỏi giao diện người dùng.

lẽ bạn có một giá trị dấu nhắc như:

var promptText = "Enter a grocery item here." 

Set nó như val của phần tử. (trên 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 
} 

Answer 3

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

Answer 4

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

Sau sự kiện đã chọ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!

Answer 5

Hãy thử này

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