select2 不调用 Ajax
Posted
技术标签:
【中文标题】select2 不调用 Ajax【英文标题】:select2 not calling Ajax 【发布时间】:2018-10-15 14:40:00 【问题描述】:我正在使用 jQuery select2 插件并尝试通过 Ajax 请求显示数据。但它没有调用 Ajax 函数,我已经尝试了一切但没有奏效。这是我的代码 -
<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调用HTML内容更改后select2 jquery插件不起作用