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.