Twitter引导键入多个值？

我使用Jquery的Twitter Bootstrap。 我想使用一个textarea的TYPEAHEAD函数，我很容易工作。 但我也需要它来允许多个select 。

我的意思是，在我从自动完成中select了一个单词之后，它会把我带回到textarea，然后如果我再次打开，那么它就会再次提供给我。

这里是一个JS bin： http : //jsbin.com/ewubuk/1/edit （里面没什么特别的）。

是否有一个容易的解决scheme，允许与键入多选？ 如果是的话，怎么样？

提前致谢。

Answer 1

编辑已经有一个关于这个： https ： //github.com/twitter/bootstrap/pull/2007

---

您可以通过使用代理来获得所需的行为： Demo（jsfiddle）

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

我认为updater方法是为了这样的事情，你只是返回将显示的东西。

---

或者， 如果你真的想要所有的东西都在同一个input元素中 ，你将不得不重写更多的方法，以便它只匹配当前types的元素： 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>' }) } }); 

这个不是白痴certificate，因为你必须在特殊字符后面input。

Answer 2

这是select框的一个很好的替代品：

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

（如果您使用多值版本。）

Answer 3

我想你可以编辑插件，以允许多选（只是不要closures下拉菜单），并添加逗号分隔的选定的值。 我看到的唯一问题是，您不知道何时closures下拉菜单。

Answer 4

最新的答案似乎不再适用于最新的版本，所以我提供以下内容。

小提琴

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

编辑：实现以前的代码有太多的额外的东西，我缩小到一个最小的工作示例。

这是之前发布的内容