标签: jquery-select2

这个 select2 jquery库看起来很棒.有一个Rails宝石,但它在文档上非常轻松.我想使用自动完成功能生成一个简单的多下拉菜单.我怎么做？

这是我的simple_form_for调用:

<%= f.input_field :neighborhood_names, url: autocomplete_neighborhood_name_searches_path, as: :autocomplete, data: { delimiter: ',', placeholder: "Where do you want to live?"}, multiple: true, id: "selectWhereToLive", class: "span8" %>

我已经成功安装了select2-railsgem,但不太确定如何让它工作.

我把它添加到我的home.js.coffee文件中:

jQuery ->
    $('#selectWhereToLive').select2()

我收到这个错误:

Uncaught query function not defined for Select2 selectWhereToLive 

思考？

编辑1:

上面的simple_form_for调用产生了这个HTML:

<input class="autocomplete optional span8" data-autocomplete="/searches/autocomplete_neighborhood_name" data-delimiter="," data-placeholder="Where do you want to live?" id="selectWhereToLive" multiple="multiple" name="search[neighborhood_names][]" size="30" type="text" url="/searches/autocomplete_neighborhood_name" value="" />

指示id正确设置属性.

编辑2 - 更新 …

我有一个jQuery的Select2的问题.

当页面加载时,如果O点击搜索结果,它将选择并触发事件onchange,但只是第一次.

如果我再搜索一次,它就不会.

这是我的代码(这是一个基于Ajax的搜索):

jQuery('#search_code').select2({
    'width': '600px',
    'tokenSeparators': [',', ' '],
    'closeOnSelect': false,
    'placeholder': 'scan or type a SKU or product or ESN',
    'minimumInputLength': 1,
    'ajax': {
        'url': 'lookProduct',
        'dataType': 'json',
        'type': 'POST',
        'data': function (term, page) {
            return {
                barcode: term,
                page_limit: 3,
                page: page
            };
        },
        'results': function (data, page) {
            return {
                results: data
            };
        }
    }
}).on('change', function (e) {
    var str = $("#s2id_search_code .select2-choice span").text();

    DOSelectAjaxProd(this.value, str);
    //this.value
}).on('select', function (e) {
    console.log("select");

});

我正在尝试使用模板的select2 ajax调用.我正好得到了ajax,但它没有使用我的模板功能.

ajax数据是:

[
   {"name":"First thing","otherData":"asdfg"},
   {"name":"Second thing","otherData":"qqerr"},
   {"name":"third thing","otherData":"yerty"},
   {"name":"fourth thing","otherData":"hgjfgh"},
   {"name":"fifth thing","otherData":"fhgkk"}
]

select2代码(我从这里拿了很多)是:

FundSearch = {
    create: function (selector, theURL) {
      $(selector).select2({
        ajax: {
          url: theURL,
          dataType: 'json',
          delay: 250,
          data: function (params) {
            console.log(params.term);
            return {
              q: params.term, // search term
              page: params.page
            };
          },
          results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to
            // …

我想为所有正在使用的过滤器设置一个重置/清除按钮,但我无法弄清楚与该按钮相关的点击事件会触发什么...例如:

为了重置所有这些select2,选择和输入字段并将所有过滤器恢复为空/空值,我需要触发和/或附加并传递给什么？

我正在使用带有多个选择的select2版本4,我支持用户添加新标签,但我想阻止人们选择新标签,如果该标签已存在于我的后端.

现在,如果用户输入已存在的标签并且我有标签:true,则它会在下拉列表中显示两个项目(现有的和新的项目).这是一个例子:

正如你所看到的,"testTag2"是我后端的一个有效标签,所以它出现在选择中,但由于templateResult函数和标签:true这一事实它也显示为第二项(让用户认为他们可以选择它作为新标签).

无论如何只在下拉列表中显示"NEW"标签选项,如果该文本未在下拉列表中列为另一个选项？

这是我的javascript代码:

function SetupAppTags() {
$("#Tags").select2({
    theme: "classic",
    width: "98%",
    tags: true,
    ajax: {
        url: "/Tag/Search",
        dataType: 'json',
        delay: 300,
        data: function(params) {
            return { q: params.term };
        },
        processResults: function(data, params) {
            return { results: data };
        },
        cache: false
    },
    escapeMarkup: function(markup) { return markup; },
    minimumInputLength: 3,
    templateResult: tagFormatResult,
    templateSelection: tagSelectionResult
});
}

 function tagFormatResult(tag) {

if (tag.loading) {
    return "Loading . . …

我正在尝试将一个额外的参数传递给select2中的ajax调用:

  $(".auto-sug").select2({
    width:'element',
    minimumInputLength:2,
    ajax: {
        url: "/action/get-custom.php",
        data: function (term, page) {
          return {
              q: term, // search term
              page_limit: 10
          };
        },
        results: function (data, page) {
            return {results: data.stuff};
        }
    }
  });

我实际上想要将另一个参数传递给ajax调用...元素本身的id

<input type="text" class="auto-sug" name="custom" id="3383" />

但是,我无法弄清楚如何实际访问元素的id(3383)或页面上的任何其他值.

我正在使用select2进行多值选择.我需要永久显示下拉列表.

现在,当我们选择或单击select2的输入框时,将显示下拉列表.我想知道是否有任何方法可以随时显示列表.

我使用Select2来管理大型数据列表.用户已表示希望能够将列表粘贴到Select2字段以便一次选择各种项目而不是手动输入和匹配列表中的每个项目.

我试图用来tokenSeparators分隔列表中的项目.这个和文档中的令牌演示让我相信我希望做的事情是可能的,但到目前为止,我没有任何快乐.

我用来实例化Select2的代码是:

$('input').select2({
    width: 'element',
    matcher: function (term, text) {
        return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
    },
    minimumInputLength: 3,
    multiple: true,
    data: tagList, // tagList is an array of objects with id & text parameters
    placeholder: 'Manage List',
    initSelection: function (element, callback) {
        var data = [];
        $.each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    tokenSeparators: [',', ', ', ' ']
});

只是为了澄清,在所有其他方面,select2字段工作.当列表粘贴到字段中时,没有任何匹配.我想测试粘贴列表中的所有项目.这是可能的,如果是的话,怎么样？

编辑: 我已经尝试了以下代码但它似乎不起作用:

$('body').on('paste', '#s2id_list-unitids .select2-input', function () {
    var that = this; …

1. 当使用"多值选择框"时,请 在每次选择后退回http://ivaynberg.github.io/select2/选择框.有没有办法不这样做,所以用户可以选择一些没有额外的点击选择框？

2. 也对团体选择感兴趣.在上面的演示网址中,"Pasific Time Zone","Mountain Time Zone"无法点击.如何使其可点击并自动选择子项目？

我想为我的项目使用select2插件.我按照这个例子,但它对我不起作用.

JSON输出:

[
    {"ime":"BioPlex TM"},
    {"ime":"Aegis sym agrilla"},
    {"ime":"Aegis sym irriga"},
    {"ime":"Aegis sym microgranulo"},
    {"ime":"Aegis sym pastiglia"},
    {"ime":"Agroblen 15816+3MgO"},
    {"ime":"Agroblen 18816+3MgO"},
    {"ime":"Agrobor 15 HU"},
    {"ime":"Agrocal (Ca + Mg)"},
    {"ime":"Agrocal (Ca)"},
    {"ime":"Agrogold"},
    {"ime":"Agroleaf Power 12525+ME"},
    {"ime":"Agroleaf Power 151031+ME"},
    {"ime":"Agroleaf Power 202020+ME"},
    {"ime":"Agroleaf Power 311111+ME"},
    {"ime":"Agroleaf Power Ca"},
    {"ime":"Agrolution 14714+14 CaO+ME"},
    {"ime":"Agrovapno dolomitno"},
    {"ime":"Agrovit HSF"},
    {"ime":"Agrovit P"},
    {"ime":"Agrozin 32 T"},
    {"ime":"Albatros Hydro"},
    {"ime":"Albatros Sprint"},
    {"ime":"Albatros Standard"},
    {"ime":"Albatros Universal"},
    {"ime":"Algaren"},
    {"ime":"AlgoVital ? Plus"},
    {"ime":"Amalgerol PREMIUM"},
    {"ime":"Amcolon \/ Novalon"},
    {"ime":"Amcopaste"},
    {"ime":"Aminosprint …