私のSelect2は3.5で正しく動作していました..
v4.0 (「フル」ではなく、必要に応じてキーワード/機能を変更) にアップグレードしてから、余分な AJAX 呼び出しが行われるという奇妙な問題が発生しました。ただし、URL が定義されていないため、404 Not Found エラーが生成されます。URL はhttps://localhost:8443/myapp/undefined です。
それらは、存在する templateResult と templateSelection に関連しているようです。それらをコメントアウトすると、select2 は正しく機能します (ただし、データはフォーマットされていません)。
それらをコメントアウトしないと、初期化時に不思議な/未定義のAJAX呼び出しが1回発生し、選択ボックスをクリックすると1回、次に入力する文字ごとに1回呼び出されます(minimumInputLengthを設定しても)。ただし、これらの偽の AJAX 呼び出しを使用しても、私の「本物の」ajax 呼び出しは実行され、結果 (templateResult/templateSelection によって適切にフォーマットされます) が返されます。「escapeMarkup」の有無にかかわらず、動作に違いはありませんでした。
これらの不適切な AJAX 呼び出しを引き起こしているのは何ですか?どうすれば停止できますか? （そうでなければ、それはうまく機能しているため）
前もって感謝します！
編集 ここに、問題を示す完全なページがあります。追加のネットワーク呼び出しは、formatResult 関数で使用するタグによって生成されます。しかし、「読み込み中」状態にあるはずなのに、なぜ html を返すのでしょうか?
さて、「プレースホルダー」を設定すると、読み込み変数が設定されないことが判明したため、html が返されます (不正な形式のタグ付き)。
そのため、プレースホルダーが設定されている場合、templateResult と templateSelection も空の ID をチェックする必要があります。
if (result.id == "" || result.loading) return result.text;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/select2/dist/css/select2.css" />
</head>
<body>
<form id="organization_lookup_form" class="form-horizontal" >
<div>
Select2 using placeholder <select id="search1" style="width:300px"></select>
</div>
<div style="padding-top:250px">
Select2 WITHOUT placeholder <select id="search2" style="width:300px"></select>
</div>
</form>
<script src="${pageContext.request.contextPath}/lib/jquery/dist/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/select2/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
function formatResult (result){
console.log('%o', result);
if (result.loading) return result.text;
var html = '<div>'+
'<img src="' + result.image + '">' +
'<h4>'+result.label+'</h4></div>';
return html;
};
$('#search1').select2({
placeholder: "Search...",
ajax: {
url: '/search',
dataType: 'json',
data: function (params, page) {
return {
term: params.term, // search term
page: page
};
},
processResults: function (data, page) {
return {results: data.results};
},
cache: true
},
templateResult : formatResult,
templateSelection : formatResult,
escapeMarkup: function(m) {
// Do not escape HTML in the select options text
return m;
},
minimumInputLength: 3
});
$('#search2').select2({
// placeholder: "Search...",
ajax: {
url: '/search',
dataType: 'json',
data: function (params, page) {
return {
term: params.term, // search term
page: page
};
},
processResults: function (data, page) {
return {results: data.results};
},
cache: true
},
templateResult : formatResult,
templateSelection : formatResult,
escapeMarkup: function(m) {
// Do not escape HTML in the select options text
return m;
},
minimumInputLength: 3
});
});
</script>
</body>
</html>