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