select2 不调用 Ajax

Posted

技术标签:

【中文标题】select2 不调用 Ajax【英文标题】:select2 not calling Ajax 【发布时间】:2018-10-15 14:40:00 【问题描述】:

我正在使用 jQuery select2 插件并尝试通过 Ajax 请求显示数据。但它没有调用 Ajax 函数,我已经尝试了一切但没有奏效。这是我的代码 -

html

<select class="form-control " multiple="" data-placeholder="Select Youtube Videos" aria-hidden="true"  name="collection_youtube_videos[]" id="collection_youtube_videos"></select>

Javascipt

$(document).ready(function()
    $('#collection_youtube_videos').select2(
        ajax: 
            url: url,
            dataType: 'json',
            data: function (params) 
                var query = 
                    //trim the extra whitespace
                    search: params.term.replace(/\s+/g, " ").trim(),
                

                // Query parameters will be ?search=[term]&type=public
                return query;
            ,
            processResults: function (data) 
                // Transforms the top-level key of the response object from 'items' to 'results'
                return 
                    results: data.items
                ;
            
        
    );
);

我正在使用以下版本

JQuery - 2.1.4

选择2- 4.0.0

问题是,当我在select2的输入框中输入内容时,它并没有调用这个ajax请求来获取数据。谁能帮我解决这个问题?

【问题讨论】:

【参考方案1】:

您可以按以下方式更改 ajax 调用

查看此链接以供参考,它包含类似的问题https://***.com/a/21602199/6429700

$(document).ready(function()
    var url = "test.php";
    $('#collection_youtube_videos').select2(
        minimumInputLength: 2,
        tags: [],
        ajax: 
            url: url,
            dataType: 'json',
            data: function (params) 
                var query = 
                    //trim the extra whitespace
                    search: params.term.replace(/\s+/g, " ").trim(),
                

                // Query parameters will be ?search=[term]&type=public
                return query;
            ,
            processResults: function (data) 
                // Transforms the top-level key of the response object from 'items' to 'results'
                return 
                    results: data.items
                ;
            
        
    );
);
select 
  width: 200px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<select class="form-control " multiple="" data-placeholder="Select Youtube Videos" aria-hidden="true"  name="collection_youtube_videos[]" id="collection_youtube_videos"></select>

【讨论】:

【参考方案2】:

你必须添加“select2”css类来选择标签

<select class="form-control select2" multiple="" data-placeholder="Select Youtube Videos" aria-hidden="true"  name="collection_youtube_videos[]" id="collection_youtube_videos"></select>

【讨论】:

以上是关于select2 不调用 Ajax的主要内容,如果未能解决你的问题,请参考以下文章

如何获取在ajax select2插件中选择的值

select2 不调用 Ajax

ajax调用HTML内容更改后select2 jquery插件不起作用

jQuery.map() 解析 select2 ajax 调用的结果

不使用jQuery以编程方式控制Select2

jQuery加载后Select2不工作