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

为了解决多个字符串的问题在相同的文本框，并包括一个正则表达式，只显示匹配字符串的开头的建议我做了以下操作：

$('#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

试试这个：

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