Twitterのブートストラップ先読み複数の値？

Question

私はJqueryでTwitter Bootstrapを使用しています。 TYPEAHEAD関数をtextarea関数に使用したいと思います。これは簡単に処理する必要があります。 しかし、私も複数選択を許可する必要があります。

これは、オートコンプリートから1つの単語を選択した後に、余分なスペースでテキストエリアに戻ってきて、再度入力を開始すると、もう一度やり直すことができます。

ここにはJSビンがあります。http://jsbin.com/ewubuk/1/edit （特に何もありません）。

先読みで複数選択する簡単な方法はありますか？はいの場合、どうですか？

ありがとうございます。

Answer 1

編集すでにそのことについてプルがあった：私はupdater方法を考えるDemo (jsfiddle)

var $myTextarea = $('#myTextarea'); 

$('.typeahead').typeahead({ 
    source: source, 
    updater: function(item) { 
     $myTextarea.append(item, ' '); 
     return ''; 
    } 
}); 

：https://github.com/twitter/bootstrap/pull/2007

---

はあなたが先行入力用のプロキシを使用することによって、所望の動作に近づくことができますこの種のことを意味しているだけで、表示されるものを返すだけです。 Demo (jsfiddle)

function extractor(query) { 
    var result = /([^,]+)$/.exec(query); 
    if(result && result[1]) 
     return result[1].trim(); 
    return ''; 
} 

$('.typeahead').typeahead({ 
    source: source, 
    updater: function(item) { 
     return this.$element.val().replace(/[^,]*$/,'')+item+','; 
    }, 
    matcher: function (item) { 
     var tquery = extractor(this.query); 
     if(!tquery) return false; 
     return ~item.toLowerCase().indexOf(tquery.toLowerCase()) 
    }, 
    highlighter: function (item) { 
     var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') 
     return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
     return '<strong>' + match + '</strong>' 
     }) 
    } 
}); 

この：あなたは本当にすべてが同じ入力要素になりたい場合にのみ、現在型付けされた要素に一致するように

---

あるいはは、あなたがより多くのメソッドをオーバーライドする必要がありますあなたは特殊文字の後に最後に入力する必要があるので、1つは馬鹿証拠ではありません。

Answer 2

複数の選択を許可するようにプラグインを編集できます（ドロップダウンメニューを閉じないでください）。選択した値をコンマで区切って追加してください。私が見る唯一の問題は、いつドロップダウンを閉じるのか分からないことです。

Answer 3

これは、選択ボックスのための優れた代替品です。

http://ivaynberg.github.io/select2/

（。あなたは多値バージョンを使用する場合）

Answer 4

トップの答えは、最新でもう動作していないようtypeahead、私は以下を提供します。

FIDDLE

function MultiTypeahead(id, data, trigger, vertAdjustMenu) 
{ 
    trigger = (undefined !== trigger) ? trigger : ''; 
    var validChars = /^[a-zA-Z]+$/; 


    function extractor(query) 
    { 
     var result = (new RegExp('([^,; \r\n]+)$')).exec(query); 
     if(result && result[1]) 
      return result[1].trim(); 
     return ''; 
    } 

    var lastUpper = false; 
    function strMatcher(id, strs) 
    { 
     return function findMatches(q, sync, async) 
     { 
      var pos = $(id).caret('pos'); 
      q = (0 < pos) ? extractor(q.substring(0, pos)) : ''; 

      if (q.length <= trigger.length) 
       return; 

      if (trigger.length) 
      { 
       if(trigger != q.substr(0, trigger.length)) 
        return; 

       q = q.substr(trigger.length); 
      } 

      if (!q.match(validChars)) 
       return; 

      var firstChar = q.substr(0, 1); 
      lastUpper = (firstChar === firstChar.toUpperCase() && firstChar !== firstChar.toLowerCase()); 

      var cpos = $(id).caret('position'); 
      $(id).parent().find('.tt-menu').css('left', cpos.left + 'px'); 
      if (vertAdjustMenu) 
       $(id).parent().find('.tt-menu').css('top', (cpos.top + cpos.height) + 'px'); 

      var matches = []; 
      var matches = [], substrRegex = new RegExp(q, 'i'); 
      $.each(strs, function(i, str) 
      { 
       if (str.length > q.length && substrRegex.test(str)) 
        matches.push(str); 
      }); 

      if (!matches.length) 
       return; 

      sync(matches); 
     }; 
    }; 

    var lastVal = ''; 
    var lastPos = 0; 
    function beforeReplace(event, data) 
    { 
     lastVal = $(id).val(); 
     lastPos = $(id).caret('pos'); 
     return true; 
    } 

    function onReplace(event, data) 
    {    
     if (!data || !data.length) 
      return; 

     if (!lastVal.length) 
      return; 

     var root = lastVal.substr(0, lastPos); 
     var post = lastVal.substr(lastPos); 

     var typed = extractor(root); 
     if (!lastUpper && typed.length >= root.length && 0 >= post.length) 
      return; 

     var str = root.substr(0, root.length - typed.length); 

     str += lastUpper ? (data.substr(0, 1).toUpperCase() + data.substr(1)) : data; 
     var cursorPos = str.length; 

     str += post; 

     $(id).val(str); 
     $(id).caret('pos', cursorPos);  
    } 

    this.typeahead = 
     $(id).typeahead({hint: false, highlight: false}, {'limit': 5, 'source': strMatcher(id, data)}) 
       .on('typeahead:beforeselect', beforeReplace) 
       .on('typeahead:beforeautocomplete', beforeReplace) 
       .on('typeahead:beforecursorchange', beforeReplace) 
       .on('typeahead:selected', function(event,data){setTimeout(function(){ onReplace(event, data); }, 0);}) 
       .on('typeahead:autocompleted', onReplace) 
       .on('typeahead:cursorchange', onReplace) 
       ; 
} 

EDIT：は、前のコードを実現あまり余分なものを持っていた、私は、最小限の作業例にそれを絞り込みます。

Thisは、以前に掲載されたものです。