我会尽可能多地解释我的问题。我正在尝试使用 select2 创建插件，一种让用户写一些字母并在每个字母上按下对 API 的调用的方法，该 API 会给出该 API 给出的前 20 个结果。
所以我有我的 HTML 选择:
<select name="filtre_products[]" class="form-control products-select2" multiple>
</select>
然后是我的 JS(已注释):
$(".products-select2").select2({
width: '100%',
closeOnSelect: false,
placeholder: '',
minimumInputLength: 3,
query: function (query) {
var data = {results: []}, i, j, s;
if(query.term != null) {
var ajax_r = [];
$.ajax({
url: 'ajax_products_recherche.php?limite=10&real_json=1&recherche='+query.term,
success: function(data_a){
//Getting the data
data_a = JSON.parse(data_a);
//Looping through the each data and putting them inside a table
data_a.forEach( (e) => {
ajax_r.push(e);
});
//Filtering the data to get from it the id and the text to be used
ajax_r.forEach( (e) => {
var tmp = e.split('-');
var id = tmp[0];
var name = tmp[2];
data.results.push({value: id, text: name});
});
query.callback(data);
}
});
}
},
//Sending the results to the function to modify the options as I please
templateResult: formatResult
});
这是 formatResult我使用的功能:
function formatResult(d) {
if(d.loading) {
return d.text;
}
// Creating an option of each id and text
$d = $('<option/>').attr({ 'value': d.value }).text(d.text);
return $d;
}
我的问题是select2应该在初始化时动态创建选项，从而实际创建 <li>从选项中添加动态 ID 等。但在我创建它的方式中，它将选项放在 <li> 中标签这不是我想要的，我希望它像他在没有查询调用的情况下那样将其视为动态选项。
一些文档资源给你们，它显示了我正在尝试做的一部分，但是这个例子显示了如何显示我们编写的结果，我希望它在每次点击时从 api 显示，并且添加了多个选择的类(class): http://select2.github.io/select2/#data
最佳答案
我已阅读文档并发现 ajax support似乎符合您的需求。
在您的 select2 选项对象中，添加一个 ajax 对象。在这个 ajax 对象中:
- 定义 ajax 调用的常规参数(url、数据类型、延迟等)
- 在数据属性中，定义返回应添加到查询字符串中的查询参数的函数
- 在 processResults 属性中，定义一个函数来处理 ajax 调用返回的数据并返回一个包含
results数组的对象(就像您已经构建的数据对象一样)。
然后，您可以重用您的模板函数。
这是一个带有随机 API 的工作片段。请注意查询的术语不会影响返回的数据。
$(document).ready(function () {
$(".products-select2").select2({
width: '100%',
closeOnSelect: false,
placeholder: '',
minimumInputLength: 3,
ajax: {
url: "https://jsonplaceholder.typicode.com/users",
dataType: 'json',
delay: 250,
data: function (query) {
// add any default query here
return query;
},
processResults: function (data) {
// Tranforms the top-level key of the response object from 'items' to 'results'
var results = [];
data.forEach(e => {
results.push({ id: e.id, text: e.name });
});
return {
results: results
};
},
},
templateResult: formatResult
});
function formatResult(d) {
if(d.loading) {
return d.text;
}
// Creating an option of each id and text
$d = $('<option/>').attr({ 'value': d.value }).text(d.text);
return $d;
}
});<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>
</head>
<body>
<select name="filtre_products[]" class="form-control products-select2" multiple>
</select>
</body>
</html>关于javascript - 使用 api 的动态 select2 选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51063490/