作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Twitter Bootstrap 和 Jquery。我想对文本区域使用 TYPEAHEAD 函数,我可以非常轻松地使用它。但我还需要它允许多重选择。
我的意思是,当我从自动完成中选择一个单词后,它会将我带回到文本区域,然后再添加一个空格,然后如果我再次开始输入,它会提示我再次输入。
这是一个 JS bin:http://jsbin.com/ewubuk/1/edit(里面没什么特别的)。
是否有一个简单的解决方案可以通过预先输入进行多项选择?如果是,如何?
提前致谢。
最佳答案
编辑已经有一个关于此的吸引力:https://github.com/twitter/bootstrap/pull/2007
<小时/>您可以通过使用预输入代理来实现所需的行为:Demo (jsfiddle)
var $myTextarea = $('#myTextarea');
$('.typeahead').typeahead({
source: source,
updater: function(item) {
$myTextarea.append(item, ' ');
return '';
}
});
我认为 updater
方法就是用于这种事情的,你只需返回将要显示的内容。
或者如果您确实希望所有内容都在同一个输入元素中,则必须重写更多方法,使其仅匹配当前输入的元素: 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>'
})
}
});
这不是白痴证明,因为你必须在最后的特殊字符之后输入。
关于twitter-bootstrap - Twitter Bootstrap 预先输入多个值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12662824/
问了这个问题How to reach CSS zen? ,我现在明白我遇到的问题大多与定位有关。我发现一些文章说 CSS 作为布局系统并不总是足够好。 http://echochamber.me/vi
我是一名优秀的程序员,十分优秀!