twitter-bootstrap – Twitter bootstrap typeahead多值?

前端之家收集整理的这篇文章主要介绍了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>'
      })
    }
});

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

猜你在找的Bootstrap相关文章