Giao diện người dùng jQuery Tự động hoàn tất: cách cho phép văn bản miễn phí

Question

Tôi muốn cung cấp cho người dùng khả năng thêm biến thể của riêng mình, không chỉ từ biến thể được đề xuất. Nhưng khi tôi nhập nội dung nào đó vào trường và nhấp vào NHẬP, gửi biểu mẫu của tôi.

Sau đó, tôi cố gắng nắm bắt sự kiện keydown cho trường của mình, nhưng trong trường hợp này, tôi có khả năng chọn một biến thể từ đề xuất bằng cách sử dụng mũi tên và nhập khóa vì tham số ui không xác định.

$('#field_id').on('keydown', function(event) { 
     if (event.keyCode == $.ui.keyCode.ENTER 
      || event.keyCode == $.ui.keyCode.NUMPAD_ENTER) 
     { 

      $('#field_id').trigger('autocompleteselect'); 
     } 
    }); 

    $('#field_id').autocomplete({ 
     source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}] 
     minLength: 0 
    }).on('autocompleteselect', function(event, ui) { 
     // if I click on suggestion using mouse - everything is ok 
     // but not for ENTER-key choosing 

     // I want something like that: 
     if (ui.item) { 
       id = ui.item.id; 
       value = ui.item.value; 
     } else { 
       id = 'my_new_item'; 
       value = $(this).val(); 
     } 
     return false; 
    }); 

Answer 1

Nếu bạn muốn ngăn chặn các hình thức từ nộp vào nhập, bạn có thể sử dụng preventDefault:

$(document).ready(function() { 
    $(window).keydown(function(event){ 
    if(event.keyCode == 13) { 
     event.preventDefault(); 
     return false; 
    } 
    }); 
}); 

Đối với autocomplete, lưu ý rằng việc kích hoạt các sự kiện 'autocompleteselect' khi vào phím được nhấn sẽ kích hoạt trình xử lý 'autocompleteselect' hai lần khi người dùng truy cập vào một mục được đề xuất. Để tránh điều này và tham số ui bị thiếu, hãy thử thêm người dùng vào làm mục được đề xuất bằng cách sử dụng gọi lại phản hồi và đặt tự động lấy nét thành đúng.

Dưới đây là ví dụ trong đó nhập người dùng được thêm vào danh sách đề xuất khi tính năng tự động hoàn tất không khớp.

$('#field_id').autocomplete({ 
    source: [{ 
     "id": "20", 
      "value": "This is not mandatory decline reason" 
    }, { 
     "id": "21", 
      "value": "You are have to be rejected" 
    }], 
    minLength: 0, 
    autoFocus: true, 
    response: function (event, ui) { 

     if (ui.content.length == 0) { 
      ui.content.push({ 
       label: "New Search value: " + $(this).val(), 
       value: $(this).val(), 
       id: 0 
      }); 
     } 
    } 
}).on('autocompleteselect', function (event, ui) { 
    id = ui.item.id; 
    value = ui.item.value; 

    return false; 
}); 

Dưới đây là ví dụ về jsfiddle ở trên.

Hy vọng điều này sẽ hữu ích.