cách ngăn sự kiện chọn mặc định trong tự động hoàn thành jquery

Question

Được kích hoạt khi một mục được chọn từ menu; ui.item đề cập đến mục đã chọn. Hành động mặc định của lựa chọn là thay thế giá trị của trường văn bản bằng giá trị của mục đã chọn. Việc hủy sự kiện này sẽ ngăn không cho giá trị được cập nhật nhưng không ngăn menu đóng lại.

$("#txt1").autocomplete({ 
    minLength: 1, 
    source: "abc.php", 
    select: function(event, ui) 
    { 
     event.preventDefault(); 
     //alert("Select"); 
     var label= ui.item.label; 
     var value= ui.item.value; 
     $('#txt1').val(ui.item.label); 
    } 
}); 

Answer 1

sử dụng tham số này selectFirst: false

Answer 2

Tôi biết đây là một câu hỏi rất cũ, nhưng tôi chỉ tình cờ gặp vấn đề bản thân mình. Câu trả lời cho tôi là đưa event.preventDefault(); ở phần cuối của phương pháp chọn như thế này:

$("#txt1").autocomplete({ 
    minLength: 1, 
    source: "abc.php", 
    select: function(event, ui) 
    { 
     //alert("Select"); 
     var label= ui.item.label; 
     var value= ui.item.value; 
     $('#txt1').val(ui.item.label); 
     event.preventDefault(); // <---- I moved! 
    } 
}); 

Đối với tôi, nếu event.preventDefault(); được đặt vào đầu của hàm, sau đó các sự kiện mặc định không bắn và phần còn lại của hàm không thực thi. Nếu nó được chuyển đến cuối thì nó hoạt động như mong đợi. Hy vọng điều này sẽ giúp người khác.

Answer 3

Vì vậy, đây là một chút hack làm việc cho tôi: Trong trường hợp của tôi chọn một mục trong kéo xuống (bằng cách nhấp chuột hoặc sử dụng các phím mũi tên để đánh dấu và nhấn ENTER), tôi đang sử dụng value để xây dựng một URL và sau đó gửi trình duyệt đến nó nhưng nó vẫn được sao chép vào hộp tìm kiếm. Không có câu trả lời nào tôi đã cố gắng để ngăn chặn điều đó. Vì vậy, để ngăn chặn value được hiển thị trong hộp tìm kiếm, tôi đã value giống như label trong JSON của tôi và bổ sung thêm một lĩnh vực code rằng select xử lý sự kiện của tôi sử dụng để xây dựng các URL tôi cần:

$("#autocomplete").autocomplete({ 
    source: "http://www.example.com/search", 
    minlength: 2, 
    select: function(event, ui) { 
    // go to page on ENTER 
    window.location.href = "/page/" + ui.item.code; 
    } 
});