Thêm giá trị vào thời gian thực tự động hoàn thành jQuery

Question

Tôi đang tạo hộp kiểm kiểu "mã thông báo đầu vào" với tự động điền (loại người dùng trong mục nào đó, chọn câu trả lời, thêm "mã thông báo" vào chế độ xem DOM).

Sử dụng tính năng tự động hoàn thành jQuery, có cách nào để thêm các giá trị không có trong danh sách source sau khi người dùng nhập chúng không? Ví dụ, một nguồn trông giống như ["Apples", "Oranges", "Bananas"]. Người dùng nhập vào "plums," khi sử dụng trường văn bản. Có cách nào để thêm "Mận" vào danh sách các nguồn nếu người dùng mong muốn không? Tôi biết có select và change sự kiện mà tôi có thể kiểm tra, nhưng select chỉ hoạt động nếu có gì đó để chọn (không có trong trường hợp này) và change sẽ yêu cầu một số loại kiểm tra thời gian chờ để xác minh rằng người dùng đã ngừng nhập.

Ngược lại, có plugin nào khác mà tôi có thể sử dụng để thực hiện hành vi này không?

Answer 1

Điều này sẽ hoạt động tốt với sự kiện thay đổi của autocomplete. Mã này giả sử có một nút có id add xuất hiện khi bạn muốn thêm một mục mới vào danh sách. Nó sẽ không xuất hiện nếu người dùng chọn một mục từ danh sách. Có một số tinh chỉnh có thể được thực hiện, nhưng bằng chứng này của khái niệm nên làm cho nó có thể:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      response($.ui.autocomplete.filter(source, request.term)); 
     }, 
     change: function (event, ui) { 
      $("#add").toggle(!ui.item); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

Dưới đây là một ví dụ: http://jsfiddle.net/rmGqB/

---

Cập nhật: Âm thanh như tôi hơi hiểu lầm yêu cầu. Bạn cũng có thể khai thác vào kết quả mà autocomplete sẽ đưa vào danh sách ứng cử viên với và lái xe khả năng hiển thị của nút dựa trên hay không kết quả tìm kiếm mang lại bất kỳ kết hợp chính xác:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      var result = $.ui.autocomplete.filter(source, request.term); 

      $("#add").toggle($.inArray(request.term, result) < 0); 

      response(result); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

Ví dụ:http://jsfiddle.net/VLLuJ/

Answer 2

Câu trả lời do Andrew cung cấp khiến nút ADD MỚI vẫn còn, ngay cả khi người dùng sau đó chọn một mục hiện có từ mảng thay vì thêm "mới" !!!

Thay vì bao gồm nút bật lên trên nút 'thêm', có chức năng .change được tích hợp trong tự động điền có thể được sử dụng.

Mặc dù "Thay đổi" chờ cho đến khi hộp văn bản bị mất tiêu điểm, đây có thể là giao diện tốt hơn để hiển thị nút THÊM nếu không khớp với mảng. (hoặc có thể tạo "xác nhận" để thêm).

Xem mã thay thế thực sự ẩn "Thêm nút" một lần nữa nếu người dùng chọn từ mảng đó. Một cái gì đó mà giải pháp Andrew Whitaker của không làm:

$(function() { 

    var source = ["Apples", "Oranges", "Bananas"]; 

    $("#auto").autocomplete({ 
    source: function (request, response) { 
     var result = $.ui.autocomplete.filter(source, request.term); 


     response(result); 
    }, 
    change: function(event, ui) { 
     var $label = $(this); 
     // figure out the id of hidden input box from label id 
     var $id = $('#'+this.id.replace('label_','id_')); 
     if (ui.item === null && $label.val() != ''){ 
     $("#add").show();    
     } 
     if(ui.item != null && $label.val() != ''){ 
     $("#add").hide();    
     } 
    } 
    }); 

    $("#add").on("click", function() { 
    source.push($("#auto").val()); 
    $(this).hide(); 
    }); 

}); 

Xem Fiddle sửa đổi của tôi trong hành động - http://jsfiddle.net/VLLuJ/25/

Answer 3

Cũ câu hỏi, nhưng câu trả lời hữu ích:

Để cập nhật nguồn autocomplete, sử dụng setter:

$ ("# tự động").tự động hoàn thành ("tùy chọn", "nguồn", ["Táo", "Cam", "Chuối", "Mận"]);

Xem http://api.jqueryui.com/autocomplete/#option-source