问题描述
限时送ChatGPT账号..我正在将 Twitter Bootstrap 与 Jquery 结合使用.我想对 textarea 使用 TYPEAHEAD 函数,我可以非常轻松地工作.但我也需要它来允许多选.
I'm using Twitter Bootstrap with Jquery. I want to use the TYPEAHEAD function for a textarea, which I got to work super easily. But I also need it to allow multiple selection.
我的意思是,在我从自动完成中选择一个单词后,它会将我带回 textarea 并留下一个额外的空格,然后如果我再次开始输入,它会让我再次输入.
By that I mean, after I selected one word from the autocomplete, it takes me back to textarea with an extra space afterwards and then if I start typing again, it offers me to do it again.
这是一个 JS 库:http://jsbin/ewubuk/1/edit(里面没什么特别的).
Here is a JS bin: http://jsbin/ewubuk/1/edit (Nothing special inside).
是否有一种简单的解决方案可以通过预先输入进行多项选择?如果是,如何?
提前致谢.
推荐答案
编辑 已经有一个关于这个的拉取:https://github/twitter/bootstrap/pull/2007
Edit There already was a pull about that : https://github/twitter/bootstrap/pull/2007
您可以通过使用预先输入的代理来实现所需的行为:Demo (jsfiddle)
You can approach the desired behavior by using a proxy for the typeahead : Demo (jsfiddle)
var $myTextarea = $('#myTextarea');
$('.typeahead').typeahead({
source: source,
updater: function(item) {
$myTextarea.append(item, ' ');
return '';
}
});
我认为 updater
方法适用于这种情况,您只需返回将要显示的内容.
I think the updater
method is meant for this kind of thing, you just return what will be displayed.
或者如果你真的希望所有东西都在同一个输入元素中,你将不得不覆盖更多的方法,以便它只匹配当前输入的元素:演示(jsfiddle)
Or if you really want everything to be in the same input element, you would have to override more methods so that it only matches the currently-typed element : 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>'
})
}
});
这不是白痴证明,因为你必须在最后输入特殊字符.
This one is not idiot proof, because you have to type at the end, after the special character.
这篇关于Twitter bootstrap 提前输入多个值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论