标签: jquery-select2

我在selectstrap 3导航栏中放置了select2搜索框.问题是当我调整浏览器大小时,搜索框不会自动调整大小,导航栏最终会溢出.目前尚不清楚如何使select2盒响应.

请看这里:https://jsfiddle.net/vgoklani/3vtrgkc7/13/

您必须在jsfiddle中调整Result窗口的大小.如果宽度不够长,则隐藏搜索框,并且不会显示.我希望搜索框能够响应,以便根据窗口的宽度调整宽度.

    <nav class="navbar navbar-dark navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
                </button>
                <a class="navbar-brand">NAME</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
                    </div>
                </form>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
                    </div>
                </form>

            </div>
        </div>
    </nav>

谢谢

我需要允许用户在select中选择仅允许的标签.

目前我有:

$("input#id_txtcolor").select2({tags:["red", "green", "blue"]});

你能帮帮我吗？

我正在使用Select2(版本3.4.0)来填充标记列表.标签通过ajax调用与现有标签匹配,我createSearchChoice用来创建新标签.代码到目前为止工作,看起来像这样:

$(mytags).select2({
    multiple: true,
    placeholder: "Please enter tags",
    tokenSeparators: [ "," ],
    ajax: {
        multiple: true,
        url: myurl,
        dataType: "json",
        data: function(term, page) {
            return {
                q: term
            };
        },
        results: function(data, page) {
            return data;
        }
    },
    createSearchChoice: function(term) {
        return {
            id: term,
            text: term + ' (new)'
        };
    },
});

所有漂亮的标准,除了注意附加(new)在createSearchChoice.我需要用户知道这不是一个预先存在的标签.

它按预期工作:如果我开始输入"new-tag",我会在列表顶部显示"new-tag(new)"标签,如果我选择它,则标签列表包含"new-tag(new ),"如预期的那样.如果标签已存在,则Select2检测到匹配,并且不会创建"(新)"选项.按返回或单击匹配按预期工作.

当我tokenSeparators在匹配时输入逗号(我的单个条目)时会出现问题.Select2关闭该标记,并将标记添加到列表中,但附加了"(new)"标签,即它使用了返回值,createSeachChoice即使它没有.

这是Select2中的错误,还是我错误地使用它(我应该怎么做)？

美好的一天,我如何通过jquery或javascript正确关闭select2下拉列表？

现在我select2-dropdown.toggle()用来关闭它,

但我注意到它只会隐藏列表,而select2框仍然会突出显示

我想失去焦点或类似的东西只是为了正确地关闭它并能够得出像这样的结果 .

顺便说一下屏幕截图很暗,因为那些select2框在一个bootstrap模式下,只要我按下回车就会出现.

任何建议真的很感激!提前致谢

我想按字母顺序对select2选项进行排序.我有以下代码,并想知道,如何实现这一目标.

<select name="list" id="mylist" style="width:140px;">
   <option>United States</option>
   <option>Austria</option>
   <option>Alabama</option>    
   <option>Jamaica</option>
   <option>Taiwan</option>
   <option>canada</option>
   <option>palau</option>
   <option>Wyoming</option>
</select>


$('#mylist').select2({
  sortResults: function(results) { return results.sort(); } 
});

我想通过'text'对数据进行排序......

我有以下代码(javascript):

$('#cbxConnections').select2({
    minimumInputLength: 0,
    multiple: false,
    allowClear: true,
    placeholder:{
        text:"@Diccionario.Connections",
        id:" @Diccionario.Connections"
    },
    ajax:{
        url:'@Url.Action("GetActiveConnections","Admin")',
        dataType: 'json',
        type:'post',
        data:function(params){
            return {
                q: params.term
            };
        },
        processResults: function(data,page){
            return {
                results: data
            };
        }
    },
    escapeMarkup: function (markup) { 
        return markup; 
    },
    templateResult: function(response){
        return '<div>'+response.Name+'</div>';
    },
    templateSelection: function(response){
        return response.Id;
    },
    id: function(connection){
       console.log(connection);
    }
});

对于服务器端,我使用的是ASP MVC 4.使用ajax选择获取数据并呈现选项,但此选项不可选.阅读其他帖子,他们描述使用id函数,但是这个函数显然在select2的版本上消失了我正在使用2.4

我正在关注github "加载远程数据"上显示的文档中的ajax示例

这就是select2.github.io为您提供的:

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }
    var $opt = $(
            '<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

我想在我的选项中添加数据图像属性:

<option value="flag" data-image="/images/flags/flag.png">Country 1</option>

并将其记录在函数中:

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }

    var optimage = opt.attr('data-image');
    var $opt = $(
            '<span><img src="/images/flags/' + optimage + '" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

可悲的是,一个简单的console.log(opt); 不会返回函数中的任何内容,因此我无法查看是否可以访问我的数据图像属性.上面的代码块返回一个错误,所以这显然不起作用.对此事有何建议？

我为这个很棒的jquery插件jQuery-Select2创建了简单的自定义AngularJs指令,如下所示:

指示

app.directive("select2",function($timeout,$parse){
    return {
        restrict: 'AC',
        link: function(scope, element, attrs) {
            $timeout(function() {
                $(element).select2();
            },200); 
        }
    };
});

在HTML模板中的用法:

<select class="form-control" select2 name="country"
data-ng-model="client.primary_address.country"
ng-options="c.name as c.name for c in client.countries">
     <option value="">Select Country</option>
</select>

它按预期工作,我的普通select元素被select2插件取代.

然而,有一个问题,有时它显示默认值,即Select Country这里虽然在下拉列表中正确的模型值是自动选择的.

现在,如果我将$timeout间隔从200某个高值增加到某个高值1500,那么它正在工作但延迟了指令的渲染.此外,我认为这不适合它,因为我的数据是通过ajax加载的.

我也尝试更新指令如下,但没有运气:

app.directive("select2",function($timeout,$parse){
    return {
        restrict: 'AC',
        require: 'ngModel',
        link: function(scope, element, attrs) {
            var modelAccessor = $parse(attrs.ngModel);
            $timeout(function() {
                $(element).select2();
            });
            scope.$watch(modelAccessor, function (val) {
                if(val) …

我有以下Select2配置.

$scope.select2Options = {
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    ajax : {
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) {
            return  {
                language : term
            };
        },
        results : function(data, page) {
            return {
                results :
                    data.map(function(item) {
                        return {
                            id : item.id,
                            text : item.description
                        };
                    }
            )};
        }
    }
};

这允许我正确填充select2控件.

发送到服务器的JSON数组包含两个名为属性的对象:然而,当我要张贴包含标签(其中包括)整体形式使用Ajax时出现的问题id和text而服务器将需要id和description.

从我的json看到片段:

"languages":[{"id":46,"text":"Français"},{"id":1,"text":"Anglais"}]

select2是否允许将其名称更改为其他名称text …

我已经看到很多Select2使用"data-"属性设置的选项标签的例子,我想这样做.

我正在使用ajax来获取数据.我得到了构建选择所需的ID和TEXT所需的.

但是我该如何为它添加更多属性呢？

我只是没有找到添加它们的方法.

$(element).select2({
    placeholder: 'Select one...',
    width: '100%',
    minimumInputLength: 2,
    ajax: {
        url: '/my/url',
        dataType: 'json',
        data: function(params) {
            return {
                q: params.term,
                page: params.page
            };
         },
         processResults: function(data, page) {
             console.log(data);
             return {
                 results: data
             };
         },
         cache: true
     }
 });