jquery-ui - jQuery UI 自动完成文本框中的多个值

Question

我需要一种简单的自动完成搜索功能，但也允许用户输入多个值。我正在使用 jQuery UI 的自动完成小部件 ( http://jqueryui.com/autocomplete/ )，到目前为止，我已将源设置为仅搜索建议中的第一个字母。我现在想添加的是用户能够从同一文本框中搜索多个项目。 (即在逗号后再次显示建议)

我一直在尝试寻找如何做到这一点。我唯一找到的是一个可以添加 multiple: true 的选项 ( http://forum.jquery.com/topic/multiple-values-with-autocomplete )。问题是它甚至不再在文档中列出，所以我不知道该选项是否已更改或不再存在。

这是我的代码:

    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);
            }
        });
    });

我尝试过的:

    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

试试这个:

  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;
            }
        });

参见DEMO