jQuery AutoComplete chọn kích hoạt sau khi thay đổi?

Question

Tôi đang sử dụng jQuery UI AutoComplete control (chỉ cần cập nhật lên jQuery UI 1.8.1). Bất cứ khi nào người dùng rời khỏi hộp văn bản, tôi muốn đặt nội dung của hộp văn bản thành giá trị đã biết và đặt trường ID ẩn cho giá trị được chọn. Ngoài ra, tôi muốn trang đăng lại khi nội dung của hộp văn bản được thay đổi.

Hiện tại, tôi đang thực hiện điều này bằng cách chọn sự kiện tự động hoàn tất đặt id ẩn và sau đó là sự kiện thay đổi trên hộp văn bản đặt giá trị hộp văn bản và nếu cần thiết sẽ khiến bài đăng trở lại.

Nếu người dùng chỉ sử dụng bàn phím, tính năng này hoạt động hoàn hảo. Bạn có thể nhập, sử dụng mũi tên lên và xuống để chọn giá trị và sau đó nhấn tab để thoát. Sự kiện được chọn kích hoạt, id được đặt và sau đó sự kiện thay đổi sẽ kích hoạt và trang đăng lại.

Nếu người dùng bắt đầu nhập và sau đó sử dụng chuột để chọn từ tùy chọn tự động hoàn tất, sự kiện thay đổi sẽ kích hoạt (khi tiêu điểm chuyển sang menu tự động hoàn thành?) Và trang đăng lại trước khi sự kiện được chọn có cơ hội được đặt ID.

Có cách nào để sự kiện thay đổi không kích hoạt cho đến sau sự kiện được chọn, ngay cả khi sử dụng chuột?

$(function() { 
    var txtAutoComp_cache = {}; 
    var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() }; 
    $('#txtAutoComp').change(function() { 
     if (this.value == '') { txtAutoComp_current = null; } 
     if (txtAutoComp_current) { 
      this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current; 
      $('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current); 
     } else { 
      this.value = ''; 
      $('#hiddenAutoComp_ID').val(''); 
     } 
     // Postback goes here 
    }); 
    $('#txtAutoComp').autocomplete({ 
     source: function(request, response) { 
      var jsonReq = '{ "prefixText": "' + request.term.replace('\\', '\\\\').replace('"', '\\"') + '", "count": 0 }'; 
      if (txtAutoComp_cache.req == jsonReq && txtAutoComp_cache.content) { 
       response(txtAutoComp_cache.content); 
       return; 
      } 
      $.ajax({ 
       url: 'ajaxLookup.asmx/CatLookup', 
       contentType: 'application/json; charset=utf-8', 
       dataType: 'json', 
       data: jsonReq, 
       type: 'POST', 
       success: function(data) { 
        txtAutoComp_cache.req = jsonReq; 
        txtAutoComp_cache.content = data.d; 
        response(data.d); 
        if (data.d && data.d[0]) { txtAutoComp_current = data.d[0]; } 
       } 
      }); 
     }, 
     select: function(event, ui) { 
      if (ui.item) { txtAutoComp_current = ui.item; } 
      $('#hiddenAutoComp_ID').val(ui.item ? ui.item.id : ''); 
     } 
    }); 
}); 

Answer 1

Tôi không biết về việc ngăn chặn sự kiện thay đổi từ bắn, nhưng bạn có thể dễ dàng ném một số điều kiện trong trường hợp thay đổi của bạn mà làm cho chắc chắn rằng các lĩnh vực tiềm ẩn đã được thiết lập và TextBox hiện có một giá trị .

Answer 2

Bạn có thể giải quyết vấn đề này bằng cách triển khai sự kiện thay đổi của mình dưới dạng tùy chọn tự động hoàn tất, giống như chọn, thay vì sử dụng hàm change() của jQuery.

Bạn có thể xem danh sách các sự kiện tại the autocomplete demo & documentation page. Nó nói rằng sự kiện thay đổi luôn luôn được kích hoạt sau sự kiện đóng, mà tôi cho là được kích hoạt sau sự kiện được chọn. Hãy xem mã nguồn của 'combobox' để xem một hook sự kiện thay đổi ví dụ.

Answer 3

Nó làm việc cho tôi trên chuột chọn khi tôi đã làm điều này:

focus: function (event, ui) { 
         $j(".tb").val(ui.item.value); 
         return true; 
        } 

Điều này làm cho văn bản TextBox thay đổi vào các sự kiện chuột tập trung, giống như cách nó xảy ra trên các sự kiện bàn phím. Và khi chúng tôi chọn một mục, nó sẽ kích hoạt lựa chọn thay đổi.