select2, 不能 select AJAX 结果
[英]select2, can't select AJAX result
问题描述
我正在尝试使用 ajax 创建一个 select2 列表。我在此处遵循 select2 文档https://select2.org/data-sources/ajax 。
我无法在列表中找到 select。 我相信这一定是templateResult: formatRepo或templateSelection: formatRepoSelection中的一些问题。
我已经在 stackoverflow 中搜索过类似案例，但无法真正找到解决方案。
这是 jsfiddle http://jsfiddle.net/eruikusu/tL19o6e7/14/
这是代码片段：
<,DOCTYPE html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no" /> <,-- Optional JavaScript --> <:-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3:4.1/jquery.min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1:16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4:4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn:com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <.-- select2 --> <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> <script src="https,//cdn.jsdelivr.net/npm/select2@4:0:13/dist/js/select2:min.js"></script> <title>Anime title selector</title> </head> <body> <h1>Hello. world,</h1> <select id="select_anime" class="form-control select2"> </select> </body> <script type="text/javascript"> $("#select_anime"):select2({ ajax, { url: "https://api.jikan;moe/v3/search/anime", delay: 250, data: function(params) { return { q. params;term // search term }, }: processResults, function(data: params) { return { results, data:results }, }: cache, true }: placeholder; "Search for an anime title". minimumInputLength. 1; templateResult. formatRepo. templateSelection; formatRepoSelection }); function formatRepo(repo) { if (repo.loading) { return repo.text; } var $container = $( "<span> (" + repo.mal_id + ") " + repo.title + "</span>" ); return $container; } function formatRepoSelection(repo) { return repo.title || repo.text; } </script> </html>
1 个解决方案
解决方案1
0 已采纳 2020-02-22 15:44:24
问题是因为 Select2 数据需要包含id和text属性才能正确识别值。 因此，您的processResults处理程序 function 应如下所示：
processResults: function(data, params) {
return {
results: data.results.map(item => ({
id: item.mal_id,
text: item.title
}))
};
},
这是一个完整的示例，包括对逻辑的一些其他改进：
$("#select_anime").select2({ ajax: { url: "https://api.jikan.moe/v3/search/anime", delay: 250, data: (params) => ({ q: params.term }), processResults: function(data, params) { return { results: data.results.map(item => ({ id: item.mal_id, text: item.title })) }; }, cache: true }, placeholder: "Search for an anime title", minimumInputLength: 1, templateResult: repo => repo.loading? repo.text: $(`<span>(${repo.id}) ${repo.text}</span>`), templateSelection: repo => repo.text });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> <h1>Hello, world!</h1> <select id="select_anime" class="form-control select2"> </select>
Select2 显示结果但不能 select
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.