javascript - select2 不调用 Ajax
问题描述
我正在使用 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请求来获取数据。谁能帮我这个?
解决方案
您可以按以下方式更改 ajax 调用
检查此链接以供参考,它包含类似的问题https://stackoverflow.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>
推荐阅读
- sql - 仅获取第一行或最高值 SQL
- swift - 快速的类属性行为
- c++ - C++:如何在链表的某个位置插入节点?
- python - 如何从 Django 模型 FileField 中读取文件
- matlab - 在同一位置获取所有 3 个轴的原点
- angular - 将 p5.play 添加和集成到 angular 并导致找不到方法的问题
- spring - SecurityContextHolder.getContext().getAuthentication() 如何工作
- sql - 在其他列上查找具有最大值的列 按另一列分组
- python - 提交表单时 Flask 引发 405 错误
- r - 基于日期时间复制和修改行