twitter-bootstrap – Twitter bootstrap typeahead多值？

发布时间：2020-12-17 23:56:58 所属栏目：安全来源：网络整理

导读：我使用Twitter Bootstrap与Jquery。我想使用TYPEAHEAD函数为textarea，我得到工作超级容易。但我也需要它允许多个选择。我的意思是，在我从自动完成中选择一个单词后，它需要我回到textarea，然后有一个额外的空间，然后如果我再次打字，它让我再做一次。

我使用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>'
      })
    }
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!