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

を同じ私が以下を行った文字列の最初に一致する提案を表示する正規表現を含めてください：

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

このお試しください：複数の文字列の問題を解決するためにDEMO