Sự kiện thay đổi tự động hoàn thành giao diện người dùng JQuery - đặt lại ID lựa chọn

Question

Tôi đang sử dụng tiện ích con Giao diện người dùng tự động hoàn tất cho biểu mẫu để cho phép người dùng nhập tên khách hàng. Ý tưởng là họ có thể chọn một khách hàng hiện có và điền vào các trường khác trong biểu mẫu hoặc họ có thể tự do nhập một khách hàng mới được tạo. Khi người dùng chọn một khách hàng hiện tại, tôi sử dụng sự kiện select để điền một đầu vào bị ẩn để lưu trữ ID được liên kết với khách hàng đó. Vấn đề tôi gặp phải là nếu người dùng lần đầu tiên chọn một khách hàng từ danh sách nhưng sau đó đi vào và chỉnh sửa văn bản, có hiệu lực khi tạo khách hàng mới, tôi cần phải có thể xóa giá trị ID đầu vào bị ẩn .

tôi gọi this SO question và tạo ra đoạn mã sau:

$(function() { 
      $("#customerName").autocomplete({ 
       source: "/Customers/CustomerListJSON", 
       minLength: 2, 
       select: function(event, ui) { 
        $("#customerId").val(ui.item ? ui.item.Id : ""); 
       }, 
       change: function(event, ui) { 
        try { 
         $("#trace").append(document.createTextNode(event.originalEvent.type + ", ")); 
         if (event.originalEvent.type != "menuselected") 
          $("#customerId").val(""); 
        } catch (err) { 
         $("#customerId").val(""); 
        } 
       } 
      }); 
     }); 

Vấn đề là sự kiện thay đổi được bắn vào blur, vì vậy nếu người dùng chọn một khách hàng, giá trị nhập ẩn được phổ biến, nhưng như ngay sau khi họ di chuyển tiêu điểm ra khỏi hộp đầu vào, nó sẽ bị xóa ngay lập tức. Tuy nhiên, nếu tôi loại trừ sự kiện blur khỏi thử nghiệm event.originalEvent.type, thì giá trị của trường ẩn sẽ không bao giờ được đặt lại trong trường hợp ban đầu mà người dùng chỉnh sửa giá trị đã chọn trước đó.

Có ai đã giải quyết vấn đề này trước đây không, và nếu có, bạn có thể cung cấp một số hướng dẫn về cách tôi có thể quản lý giá trị của đầu vào bị ẩn đó để nó được điền chỉ khi một mục được chọn từ danh sách và xóa với bất kỳ giá trị nào khác?

Answer 1

Dường như tôi đã tự giải quyết vấn đề này một cách nhanh chóng. Đề cập đến JQuery UI wiki, các ui mục trong trường hợp change là một giống trong trường hợp select, vì vậy tôi có thể sửa đổi mã của tôi để đọc như thế này:

$(function() { 
    $("#customerName").autocomplete({ 
     source: "/Customers/CustomerListJSON", 
     minLength: 2, 
     select: function(event, ui) { 
      $("#customerOrganizationId").val(ui.item ? ui.item.Id : ""); 
     }, 
     change: function(event, ui) { 
      $("#customerOrganizationId").val(ui.item ? ui.item.Id : ""); 
     } 
    }); 
}); 

Không cần để kiểm tra cho sự kiện này, chỉ dành riêng cho cho dù có một mục trong đối số ui. Cài đặt ID trong sự kiện select có thể là dư thừa, nhưng để an toàn, tôi sẽ giữ cả hai.

Answer 2

$(function() { 
$("#customerName").autocomplete({ 
    source: "/Customers/CustomerListJSON", 
    minLength: 2, 
    select: function(event, ui) { 
     $("#customerId").val(ui.item ? ui.item.Id : ""); 
    }, 
    change: function(event, ui) { 
     try { 
      $("#trace").append(document.createTextNode(event.originalEvent.type + ", ")); 
      if (event.originalEvent.type != "menuselected") 
       $("#customerId").val(""); 
     } catch (err) { 
      $("#customerId").val(""); 
     } 
    } 
}); 
});