twitter-bootstrap – Twitter bootstrap typeahead多值?

我使用Twitter Bootstrap与Jquery。
我想使用TYPEAHEAD函数为textarea,我得到工作超级容易。
但我也需要它允许多个选择。

我的意思是,在我从自动完成中选择一个单词后,它需要我回到textarea,然后有一个额外的空间,然后如果我再次打字,它让我再做一次。

这里是一个JS bin:http://jsbin.com/ewubuk/1/edit
(内部没有什么特别的)。

有一个简单的解决方案,允许多重选择with typeahead?如果是,如何?

提前致谢。

解决方法

编辑已经有一个拉关系: https://github.com/twitter/bootstrap/pull/2007

您可以通过使用typeahead的代理来达到所需的行为: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>'
      })
    }
});

这一个不是白痴证明,因为你必须在特殊字符后面键入。

相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap...
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所...
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不...
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了...
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有...
BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前...