JJe*_*eff 5 javascript ajax jquery jquery-select2 jquery-select2-4
我的 Select2 在 3.5 上工作正常..
自从升级到 v4.0（不是“完整” - 并根据需要更改关键字/函数）以来，我遇到了一个奇怪的问题，即进行了额外的 AJAX 调用。但是，URL 未定义，因此它们会生成 404 Not Found 错误。URL 是https://localhost:8443/myapp/undefined
它们似乎与存在的 templateResult 和 templateSelection 有关。如果我将它们注释掉，则 select2 可以正常工作（但我的数据未格式化）。
由于它们没有被注释掉，我在初始化时得到了一次神秘/未定义的 AJAX 调用，然后当我单击选择框时进行一次调用，然后为我输入的每个字符调用一次（即使我设置了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>
templateResult从 4.0 版本开始，和的值templateSelection只是“附加”的。此行为没有记录。
所以如果你传递html，所有标签都会显示。
解决方法是返回一个 jQuery 对象：
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;
return $(html);
};
这里有几个问题可能会导致您看到这样的请求。
text对象的属性指向选项的人类可读版本。这在后台用于匹配选项以及可访问性目的，因此使用它很重要。loading设置了该选项，如果您仅处理“搜索...”文本，则该选项有效，但如果正在处理其他任何内容，则该选项不起作用。我建议改为检查该image属性是否不存在，这似乎就是undefined这些情况下的情况。并回答您提出的具体问题
是什么触发了这些不良 AJAX 调用？我该如何阻止它们？
Select2 仅在搜索时触发远程请求，因此任何额外的请求都必须在您的代码中生成。就您而言，这是因为您试图在结果中显示图像，但您没有处理图像实际上不存在于对象上的情况。
但是为什么它应该处于“加载”状态时却返回 html 呢？
该templateResult方法用于格式化结果中显示的许多通知，包括“正在搜索...”消息。这允许您对这些消息应用特殊格式，但这也意味着您需要在模板方法中处理它们。通常这不应该是一个问题，因为它定义了text通常用于显示选项的人类可读版本的属性，但当不使用该属性时，它会导致问题。