标签: jquery-select2-4

我有一个从Ajax数组填充的select2 v4.0.0.如果我设置select2的val我可以通过javascript调试看到它已经选择了正确的项目(在我的情况下为#3),但是这没有显示在选择框中,它仍然显示占位符.

我应该看到这样的事情:

在我的表单字段中:

<input name="creditor_id" type="hidden" value="3">
<div class="form-group minimal form-gap-after">
    <span class="col-xs-3 control-label minimal">
        <label for="Creditor:">Creditor:</label>
    </span>
    <div class="col-xs-9">
        <div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
            <select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8">
                <option></option>
            </select>
        </div>
    </div>
</div>

我的javascript:

var initial_creditor_id = "3";
$(".creditor_select2").select2({
    ajax: {
       url: "/admin/api/transactions/creditorlist",
       dataType: 'json',
       delay: 250,
       data: function (params) {
           return {
                q: params.term,
                c_id: initial_creditor_id,
                page: params.page
           };
       },
       processResults: function (data, page) {
            return {
                results: data
            };
       },
       cache: true
   }, …

我尝试在启动Select2时使用"language.noMatches"选项并抛出一个未定义的函数？我该如何修改那段文字？我想包含一个html按钮,如果找不到它,将添加用户的输入.我尝试将此作为一个函数和纯文本.我还删除了所有的HTML,看看是不是这样做了.

$('#search-select').select2({

   ...

   "language": {
       "noMatches": function(){
           return "No Results Found <a href='#' class='btn btn-danger'>Use it anyway</a>";
       }
   }
});

这是之前在Select2 v3.5中的"formatNoMatches"

在这个从远程源加载的数据示例中,我可以看到图像和其他html元素呈现为选项.我想使用本地数组中的数据完成同样的事情.我已经尝试构建一个数组,如文档中所述并添加data选项,但html呈现为明文:

var data = [
  { id: 0, text: '<div style="color:green">enhancement</div>' },
  { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }];

$("select").select2({
  data: data
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select></select>

如何将html内容添加到select2选项？

我在bootstrap模式中有一个select2框,我想更改select2框的值,但它不起作用.

我在以前的帖子和结果中尝试过每一个解决方案,但没有一个能让它发挥作用.

我使用select2 4.0.2,我测试过:

$('#select_id').val('val').trigger('change.select2');

$('#select_id').val('val').trigger('change');

$('#select_id').val('val').change()

它工作一到两次然后停止工作(随机)

只有当我将select2更改回3.xx时,它才能正常工作

我一直在试用新的Select2 v4.0,它有很多改进.我主要对这个tags功能感兴趣.我希望能够通过ajax搜索标签,只能从显示的结果中选择一个标签,而不能创建新的标签.该功能类似于StackOverflow - 如果您没有必要的声誉,则无法创建新标签,但仍可以使用现有标签标记问题.

这是我的代码的jsfiddle,它取自示例.在该示例中,您可以创建我想要限制的新标记.用户应该只能从通过ajax从GitHub检索的列表中选择标签.

有人知道如何禁用此功能吗？

我使用Select2搜索框构建了一个web-app,它通过AJAX连接到我们的后端.搜索框将查询(例如"APPLES")传递给后端,然后后端更新页面.如何以编程方式将搜索查询注入搜索框？我需要传入"val",以便select2通过AJAX调用后端并更新页面.我确信这很明显,但我在文档中找不到它.

例如,我希望用户单击一个按钮并在搜索字段中自动填充"APPLES"一词,然后让页面更新,而不是强迫用户在搜索框中键入"APPLES".

谢谢!

在Kevin的评论之后,我不处于这种状态,其中文本嵌入在搜索框中,并且选择器已经选择了正确的项目.如何提交(或触发)此请求,我尝试了"keydown","pressdown","submit","click"(清除框)等.

我正在尝试使用Select2 4.0分页结果(每25行),但我不知道如何实现它.有人知道怎么做吗？

如果用户到达25行的末尾,并且如果有更多行,我想加载它并显示它.

这是我的HTML模板

<div class="form-group">
    {!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id'] ) !!}
</div>

这是Select2的JavaScript.

$("#breed_id").select2({
    placeholder: 'Breed...',
    width: '350px',
    allowClear: true,
    ajax: {
        url: '',
        dataType: 'json',
        data: function(params) {
            return {
                term: params.term
            }
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    }
});

这是我的控制器代码

if ($request->ajax())
{
    $breeds = Breed::where('name', 'LIKE',  '%' . Input::get("term"). '%')->orderBy('name')->take(25)->get(['id',DB::raw('name as text')]);

    return response()->json($breeds);
}

当我试图把params.page它说成"未定义"时.

我在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>

谢谢

我有以下代码(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版本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 . . …