Tự động điền tự động điền jQuery không giữ lại

Question

Khi sử dụng Tự động điền jQueryUI với Tự động lấy nét được đặt thành true, nếu bạn nhập quá nhanh và nhấn enter, lựa chọn đầu tiên sẽ thay thế những gì bạn đã nhập, ngay cả khi nó không khớp. Ví dụ: nếu bạn nhập "ứng dụng" và lựa chọn đầu tiên của tính năng tự động hoàn thành cuộn là "táo", sau đó tiếp tục nhập "vật dính liền" một cách nhanh chóng và nhấn enter, "vật dính liền" được thay thế bằng "quả táo" ".

Ngay trước khi văn bản đã nhập được thay thế bằng lựa chọn đầu tiên từ tự động điền, có cách nào để đảm bảo lựa chọn đầu tiên vẫn khớp với văn bản đã nhập không?

Answer 1

Giảm thời gian trễ của bạn trong các tùy chọn tự động hoàn thành. Nếu bạn đang sử dụng dữ liệu cục bộ, bạn có thể đặt độ trễ thành 0. Theo mặc định, nó được đặt thành 300 (mili giây). Vì vậy, sau khi bạn nhấn một phím, phải mất 300ms trước khi nó đánh giá lại tập dữ liệu cho phù hợp.

Vì vậy, về cơ bản bạn lấy nét tự động trên mục đầu tiên và không cho nó cơ hội lọc lại trước khi nhấn enter.

Ngoài ra, bạn có thể thay đổi luồng giữa trễ sau tự động lấy nét đầu tiên. Vì vậy, lần đầu tiên bạn đợi 300ms để hiển thị đề xuất, sau đó trong sự kiện lấy nét, bạn giảm bộ đếm thời gian xuống 0ms để bộ lọc sẽ lọc danh sách nhanh hơn.

Hãy cẩn thận, vì độ trễ 0 có thể gây ra sự cố nếu đó là dữ liệu từ xa. Một cái gì đó như thế này có thể hoạt động tốt:

$(".selector").autocomplete({ 
    delay: 300, 
    focus: function() { 
    $(".selector").autocomplete("option", "delay", 0); 
    }, 
    source: sourceData 
} 

Answer 2

Tôi biết tôi đến trễ, nhưng điều này đã khiến tôi phát điên. Tôi không muốn thay đổi sự chậm trễ của tôi, và ngay cả khi tôi đã làm, Nếu tôi gõ quá nhanh nó vẫn sẽ xóa ký tự cuối cùng của tôi.

Sau một nhức đầu lớn, tôi thấy giải pháp tốt nhất :)

Mở jquery-ui-1.8.20.custom.js của bạn (không thể đảm bảo với bạn mã sẽ làm việc trong bất kỳ phiên bản khác) và sau đó tìm thấy điều này dòng:

   blur: function(event, ui) { 
       // don't set the value of the text field if it's already correct 
       // this prevents moving the cursor unnecessarily 
       if (self.menu.element.is(":visible") && 
        (self.element.val() !== self.term)) { 
        self.element.val(self.term); 
       } 
      } 

Chỉ cần bình luận ra rằng if statement như thế này:

   blur: function(event, ui) { 
       // don't set the value of the text field if it's already correct 
       // this prevents moving the cursor unnecessarily 
       /*COMMENTING THIS IF OUT MAKES AUTOCOMPLETE STOP ERASING WHAT YOU TYPE 
       if (self.menu.element.is(":visible") && 
        (self.element.val() !== self.term)) { 
        self.element.val(self.term); 
       } 
       */ 
      } 

và tất cả mọi thứ sẽ hoạt động tốt :)