标签: jquery-select2-4

我使用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已经2年了,我真的很喜欢所有开发.但是,版本3.5.x有他的限制,所以我转向4.0版,这让我头疼!

为了您的记录,我正在使用带有大表(> 10.000个条目)的Select2,因此AJAX和无限数据(页面设置为50个项目).

1. 使用版本3.5.2,我可以在搜索数据时重现下划线匹配(使用formatSelection和query.term).任何想法如何使用4.0.0版本(功能templateResult只通过result而query不再是？

2. 使用版本3.x,您可以使用不在列表中的搜索值添加免费条目(使用createSearchChoice).版本4.0没有此选项,任何想法如何再次使用？

3. 我尝试用输入栏替换选择栏(仍然使用选择下拉列表).似乎可以强制适配器,但我无法找到如何.

4. 我需要添加一行(在第1行)或一个按钮(向右浮动)来添加新项目(类似于createTag,但对于项目).有人做过吗？

我有一个使用Bootstrap 3.3.4,Select2 4.0和Jquery Validation 1.13.1的项目

我已经将jquery验证器默认设置为样式引导程序3类,如此

 $.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",

    highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },

    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
           error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }

    }
});

但是这些默认值不会将select2字段设置为相同...在下图中,"metals"选择是一个bootstrap字段,而"colors"select是一个select2字段.

我尝试搜索其他SO,但所有这些都使用3.5.xx版本的select2

我包括了一个示例的jsfiddle,我正在寻找调整验证器的默认值,让select2看起来统一

http://jsfiddle.net/z49mb6wr/

我正在使用select2自定义数据适配器.提供的所有数据select2都是在网页中本地生成的(因此不需要使用ajax).由于query方法可以生成很多结果(约5k),打开选择框的速度相当慢.

作为一种补救措施,我想使用无限滚动.自定义数据适配器的文档说该query方法应该接收page参数term:

@param params.page应加载的特定页面.这通常在使用远程数据集时提供,远程数据集依靠分页来确定应显示哪些对象.

但事实并非如此:只term存在.我试图返回more: true或more: 1000,但这没有帮助.我想这是因为,默认情况下,如果启用了ajax,则启用无限滚动.

我猜测启用无限滚动将涉及使用amd.require,但我不知道该怎么做.我试过这段代码:

$.fn.select2.amd.require(
    ["select2/utils", "select2/dropdown/infiniteScroll"],
    (Utils, InfiniteScroll) =>
      input.data("select2").options.options.resultsAdapter = 
        Utils.Decorate(input.data("select2").options.options.resultsAdapter, InfiniteScroll)
)

这是咖啡脚本,但我希望它对每个人都是可读的.input是DOM包含选择框的元素 - 我之前做过input.select2( //options )

我的问题基本上是,如何启用无限滚动ajax？

我通过AJAX获取用户ID和名称,并使用Select2搜索它们,但是我的用户已经请求能够通过按Tab键从typeahead下拉列表中进行选择,有效地将其视为按Enter键.这是我的select2声明:

$("#user-select").select2({
    ajax: {
        url: "/api/User",
        method: "get",
        data: function (params) {
            return {
                search: params.term
            };
        },
        beforeSend: function () {
            $(".loading-results").text("Loading...");
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    allowClear: true,
    placeholder: "Enter a User ID or Name",
    templateResult: function (data) {
        return "(" + data.id + ") " + data.name;
    },
    templateSelection: function (data) {
        return "(" + data.id + ") " + data.name;
    }

每当下拉列表可见时,".select2-search__field"似乎都是焦点元素,突出显示的元素将获得类"select2-results__option - highlight".

我已经尝试了一些解决方案,但似乎没有任何效果,特别是因为这个元素在下拉列表打开时出现并消失.不幸的是,我从我的尝试中丢失了代码,但它们主要包括在聚焦输入上触发Tab时执行preventDefault,然后在突出显示的元素上触发click事件或触发输入上的enter键.

我也试过调整selectOnClose选项,但是这看起来很麻烦,当我让它正常运行时会导致无限循环,更不用说根据按下的键来覆盖它.

[编辑] …

我有一个select2下拉列表,如下所示:

    $(function () {
  $("#itemSelect").select2().on("select2:select", function (e) {
   $("#itemSelect").val(-1).trigger("change");
        var id = e.params.data.title;
        var url = siteRoot + "/site/item?itemID=" + id ;
        $("#Container").load(url);
    });
});

它从我的模型中获取它的值:

<select class="js-data-example-ajax" aria-expanded="true" style="width: 100%; display: none;" id="itemSelect">
<option disabled selected value="-1"> Search by item </option>
@foreach (var item in Model)
{
    <option text="@item.Id" title="@item.Id">
        item.Name
    </option>
}

一切正常,除了当我选择一个项目并且已经加载时,我可以将鼠标悬停在下拉列表上,它会显示项目中的ID.我不想出示身份证!

在图片中,您可以看到当我将鼠标悬停在"冰茶"上时显示的下拉列表和项目编号

我知道这是因为select2得到了id var id = e.params.data.title;,但我怎么能改变这个呢？它不合作 var id = e.params.data.id;

我尝试使用工具提示,但我是新手.

//$("#select2-itemSelect-container").tooltip({
//    title: "Search item",

//    placement: "auto"
//});

我只是想在鼠标悬停时删除下拉列表中的ID.感谢每一位帮助.

我希望我的问题有道理 - 不确定最好的方式来形容这一点.我有一个分组的Select2选择表单输入如下:

• 蔬菜
• 生菜
• 番茄
• 洋葱
• 水果
• 苹果
• 桔子
• 香蕉
• 价差
• vegemite发表
• 花生酱
• 花生酱

所以你开始输入App,当然你可以Apples从Select2下拉菜单中获得.如果你输入veg你Vegemite和Vegetables组标题,但所有的选项都隐藏.如果搜索字词与组标题匹配,我想保持所有组选项可见.

我在select2源代码中进行了一些挖掘,我认为它实际上很容易,但我可能是错的,如果我是对的,我会被困在如何使它工作.以下是源代码: https://github.com/select2/select2/blob/81a4a68b113e0d3e0fb1d0f8b1c33ae1b48ba04f/src/js/select2/defaults.js:

我创建的Gist与尝试将其粘贴在此处:

https://gist.github.com/jasper502/40b810e55b2195476342

我切换了代码的顺序,并进行了一些轻微的变量名称更改以反映这一点.我认为这将使期权组保持开放.我试图基于此创建一个自定义匹配器(请参阅我的要点),但我被困在它调用的地方DIACRITICS:

https://github.com/select2/select2/blob/8ad8f200ba8c9429d636453b8ee3bcf593e8c87a/src/js/select2/diacritics.js

经过一些谷歌搜索,我意识到这正在取代重音字符,我知道我没有,所以我删除了那部分.

现在我的匹配器TypeError: data.indexOf is not a function. (In 'data.indexOf(term)', 'data.indexOf' is undefined) 在我的浏览器中出错了.

我相信我在这里非常接近但是我有点超过我的经验和/或技能水平来完成这个.任何指针或想法将不胜感激.

UPDATE

这是一个与我合作的JSfiddle:

https://jsfiddle.net/jasper502/xfw4tmbx/9/

我在自己的某些自定义区域中在WooCommerce中使用Select2，并通过添加和删除某些类的代码来定位它，并且工作正常。但是WooCommerce本身使用的SelectWoo实例不起作用。

示例代码：

(function($) {

    $('select').each(function(e) {
        handleSelectSelections($(this));
    });


})( jQuery );

function handleSelectSelections(select) {

    var el = (select.next('.select2').length) ? jQuery(select.data('select2').$container) : select;

    if (select.val() !== "" && select.val() !== null) {
        el.addClass('has-selection');
    } else {
        el.removeClass('has-selection');
    }

}

一切正常，除非到达添加了类的实际部分，否则不起作用-不添加任何类。

我在这里想念什么吗？

我有下一个HTML结构

<select class="change_item_dropdown_ajax form-control" id="item_id" name="item_id" onchange="updateData(this, this.value, 16)" >
<optgroup label="System Data">
  <option value="17">Test</option>
  <option selected="selected" value="18">System</option>
</optgroup>
</select>

使用Javascript

 $(".change_item_dropdown_ajax").select2({
        ajax: {
            url: "get_user_items",
            dataType: 'json',
            delay: 250,
            theme: "classic",
            data: function (params) {
                return {
                    q: { name_contains: params.term } // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        allowClear: true,
        placeholder: '--- Please select item ---',
        minimumInputLength: 1
    });

我想让客户看到一些带有项目的默认系统选项<optgroup label="System Data">,但也增加了通过自己的项目进行搜索ajax查询的能力.

但是在绑定select2后它没有显示<optgroup label="System …

我实现了一个标记系统,您可以从中选择现有标记或添加新标记.选择新标签后,它将持续使用AJAX调用.

为了达到这个目的,我使用了回调createTag和事件select2:select.因为我只想在选中它时创建标记,所以如果事件select2:select被触发,我会对此进行AJAX调用.

问题是我需要使用从将新标记保存到数据库得到的ID更新已创建的select2选项.什么是最干净的解决方案？

这就是我所拥有的:

$('select.tags').select2({
     tags: true,
     ajax: {
         url: '{{ path('tag_auto_complete') }}',
         processResults: function (data) {
             return {
                 results: data.items,
                 pagination: {
                     more: false
                 }
             };
         }
     },
     createTag: function (tag) {
         return {
             id: tag.term, // <-- this one should get exchanged after persisting the new tag
             text: tag.term,
             tag: true
         };
     }
 }).on('select2:select', function (evt) {
     if(evt.params.data.tag == false) {
         return;
     }

     $.post('{{ path('tag_crrate_auto_complete') }}', { name: evt.params.data.text }, function( data …