标签: jquery-select2-4

我刚开始使用项目从选择框中显示多个标签,并且它非常好用,感谢库.

我只需要修改多值选择框中显示的标签的颜色或css.现在标签的颜色显示为灰色,我想根据标签的类型将其更改为其他颜色.或者至少有办法改变默认颜色？

还可以更改标签的css类吗？有一个选项,formatResultCssClass但是当我试图通过该属性添加css类没有任何改变时,我将不胜感激,如果有人可以展示如何做到这一点的例子？

编辑:解决问题的解决方法:向select2.defaults添加新属性以表示所选对象的类.

$.fn.select2.defaults = {
...
    selectedTagClass: "",
...
}

addSelectedChoice: function (data) {
        var choice=$(
            "<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
            "    <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
            "</li>"),
        id = this.id(data),
        val = this.getVal(),
        formatted;
...

并使用以下新属性初始化select2:

$(".#select2Input").select2({placeholder: "Please Select Country", 
                    selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements
                    formatNoMatches: function () { return "There isn't any country similar to entered …

我正在使用带有标签的Select2(版本4),并希望在输入字段下方显示所选的选项.

所以代替:

而是:

这是可能的,如果是这样,我该如何实现？

编辑:代码是:

<select class="js-example-tags form-control" multiple="multiple">
    <option selected="selected">orange</option>
    <option selected="selected">white</option>
    <option selected="selected">purple</option>
    <option selected="selected">red</option>
    <option selected="selected">blue</option>
    <option selected="selected">green</option>
</select>

和

$(".js-example-tags").select2({
tags: true
})

我正在使用select2版本4.0,我正在尝试对选择框进行编程选择,该框从ajax调用获取其数据.

在文档中,我找到了如何以编程方式将值设置为常规select2,但我无法弄清楚如何使用ajax select来执行此操作.

如果我没记错的话,在旧版本中,您可以通过使用以下命令将数据传递给select2来设置当前值:

jQuery("selectbox").select2("data", data)

我已经尝试了这个,并发送了一个带有,id,text和result的数据对象,但没有任何可见的事情发生,当我查询选择框的状态时,要查看所选的值,它将返回null.

此选项已删除,或只是更改？我在哪里可以在文档中找到它,或者我怎样才能实现所需的行为？

我正在使用Select2版本4.0.0.

如果我的结果包含多个单词,并且用户输入其中一个单词,我想显示按输入单词在结果中的位置排序的结果.

例如,用户输入"apple",我的结果是:

1. "香蕉橙苹果"
2. "香蕉苹果橙"
3. "苹果香蕉橙"

然后"apple banana orange"应首先出现在select2结果列表中,因为这是"apple"最早出现在结果中的结果.我不太关心过去的顺序.

我可以覆盖或配置什么来获得这样的东西？它似乎matcher不处理排序,并且sorter不包含查询数据.

我使用的是最新版本的Select2:Select2 4.0.

我想允许用户输入自由文本.换句话说,如果用户在下拉列表中找不到选项(ajax返回的数据),我希望他们能够"选择"他们输入的任何文本.

这是我的标记:

<select class="required form-control" id="businessName" data-placeholder="Choose An Name" > </select> 

这是我用来初始化Select2的JavaScript:

$("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    createSearchChoice:function(term, data) {
        if ( $(data).filter( function() {
          return this.text.localeCompare(term)===0;
        }).length===0) {
          return {id:term, text:term}; …

我从选择迁移到select2插件,因为它对我来说效果更好,但与选择相比,它的文档非常差.任何人都可以告诉我应该使用哪个选项来使select2搜索功能过滤以搜索词开头的词(并且不在中间包含它).

让我们说select2字段有这些选项:香蕉,苹果,菠萝.

当用户输入"app"(或苹果)时,只应返回apple(因为它是唯一以apple开头的单词).现在,它返回苹果和菠萝.

经过大量搜索后,我发现需要使用一些自定义匹配器,但到目前为止都是如此.

我试图找出在select2下拉项中读取当前所选文本(而不是值)的正确方法.我没有在文档中看到这个.

我可以看到有一个新的DOM元素是原始选择下拉列表的ID,带有"-container"后缀和"select2-"前缀,因此不确定是否建议读取此内容或者select2有另一个api调用.

使用jquery读取当前所选文本的正确方法是什么？

我目前无法<select>在Firefox(38.0.5)中选中启用S​​elect2的元素 - 换句话说,无法以<option>无鼠标的方式进行选择.在Chrome中,您可以在表单中进行制表,然后按enter,以便开始在Select2 select元素中选择一个项目.我没有在其他浏览器中测试过,但在提交实际错误报告之前,我想验证其他浏览器是否遇到同样的问题？

您可以在演示页面上复制.

• 选择2 v4.0.0
• Twitter Bootstrap 3.3.4(虽然没有为Bootstrap的样式添加任何其他项目)
• Firefox v38.0.5

我使用jquery-select2-4搜索外部数据库,并向用户显示他可以选择的搜索结果.

我有一个在这个jsfiddle上运行的工作版本.

但是,例如,如果只返回1个搜索结果,我想跳过整个选择过程,只需将返回的搜索结果添加到所选选项列表中.根据select2文档,我可以添加一个像这样的新选项:

option = new Option("Sample text", "123", true, true);
select2_element.append(option);
select2_element.trigger('change');

这似乎在某种程度上起作用.但是有一些问题.

• 添加选项后,我无法清除搜索字段.
• 我不能添加任何其他的id和a text.
• 添加的选项显示给用户undefined.

我意识到这个问题包含3个方面,但所有3个方面可能都会回到这个问题:

如何以编程方式添加新的jquery-select2-4选项并重置搜索字段？

供您参考,这是我要问的代码的上下文:

var formatRepo, formatRepoSelection, selectRepos;

formatRepoSelection = function(element) {
  return element.name + ' ' + element.forks + ' ' + element.id;
};

formatRepo = function(element) {
  var markup;
  if (!element.loading) {
    return markup = element.name + ' ' + element.id;
  }
};

selectRepos = function() {
  var option, select2_element; …

我想在列表的第一个元素中添加一个按钮"添加新项目".如果用户点击该按钮,我需要打开一个弹出窗口并获取用户的输入.如何在select2插件中执行此操作？此(或)的任何默认选项是否需要自定义此选项？