jQuery UI Tự động hoàn thành nhiều giá trị trong hộp văn bản

Question

Tôi cần chức năng tìm kiếm tự động hoàn tất đơn giản nhưng cũng cho phép người dùng nhập nhiều giá trị. Tôi đang sử dụng tiện ích tự động điền của giao diện người dùng jQuery (http://jqueryui.com/autocomplete/) và cho đến nay tôi đã đặt nguồn để chỉ tìm kiếm chữ cái đầu tiên trong đề xuất. Những gì tôi muốn thêm bây giờ là khả năng cho người dùng tìm kiếm nhiều mục từ cùng một hộp văn bản. (tức là sau khi đề xuất dấu phẩy được hiển thị lại)

Tôi đã cố tìm kiếm cách thực hiện điều này. Điều duy nhất tôi đã tìm được là một tùy chọn có thể được thêm vào multiple: true (http://forum.jquery.com/topic/multiple-values-with-autocomplete). Thing là nó thậm chí không được liệt kê trong tài liệu nữa vì vậy tôi không biết nếu tùy chọn đã thay đổi hoặc không tồn tại nữa.

Đây là mã của tôi:

var items = [ 'France', 'Italy', 'Malta', 'England', 
     'Australia', 'Spain', 'Scotland' ]; 

    $(document).ready(function() { 
     $('#search').autocomplete({ 
      source: function (req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp('^' + re, 'i'); 
       var a = $.grep(items, function (item, index) { 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      } 
     }); 
    }); 

gì tôi đã cố gắng:

var items = [ 'France', 'Italy', 'Malta', 'England', 
     'Australia', 'Spain', 'Scotland' ]; 

    $(document).ready(function() { 
     $('#search').autocomplete({ 
      source: function (req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp('^' + re, 'i'); 
       var a = $.grep(items, function (item, index) { 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      }, 
      multiple: true 
     }); 
    }); 

Answer 1

Để giải quyết vấn đề của nhiều chuỗi trong cùng một hộp văn bản VÀ bao gồm một regex để chỉ hiển thị đề xuất phù hợp với sự bắt đầu của chuỗi Tôi đã làm như sau:

$('#search').autocomplete({ 
     minLength: 1, 
     source: function (request, response) { 
      var term = request.term; 

      // substring of new string (only when a comma is in string) 
      if (term.indexOf(', ') > 0) { 
       var index = term.lastIndexOf(', '); 
       term = term.substring(index + 2); 
      } 

      // regex to match string entered with start of suggestion strings 
      var re = $.ui.autocomplete.escapeRegex(term); 
      var matcher = new RegExp('^' + re, 'i'); 
      var regex_validated_array = $.grep(items, function (item, index) { 
       return matcher.test(item); 
      }); 

      // pass array `regex_validated_array ` to the response and 
      // `extractLast()` which takes care of the comma separation 

      response($.ui.autocomplete.filter(regex_validated_array, 
       extractLast(term))); 
     }, 
     focus: function() { 
      return false; 
     }, 
     select: function (event, ui) { 
      var terms = split(this.value); 
      terms.pop(); 
      terms.push(ui.item.value); 
      terms.push(''); 
      this.value = terms.join(', '); 
      return false; 
     } 
    }); 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 

Answer 2

Hãy thử điều này:

function split(val) { 
    return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
    return split(term).pop(); 
    } 

    $("#search") 
     .autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       response($.ui.autocomplete.filter(
        items, extractLast(request.term))); 
      }, 
      focus: function() { 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       terms.pop(); 
       terms.push(ui.item.value); 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 

SEE DEMO