首页 > 编程语言> > javascript – jquery select2(4.0)ajax with templateResult和templateSelection

javascript – jquery select2(4.0)ajax with templateResult和templateSelection

2019-07-02 20:22:23 作者：互联网

我的Select2正在正确地工作3.5 ..

由于升级到v4.0(不是“完整” – 并根据需要更改关键字/功能),我有一个奇怪的问题,即有额外的AJAX调用.但是,URL未定义,因此它们会生成404 Not Found错误.网址是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>

解决方法:

这里有一些问题可能会导致您看到的请求.

> Select2要求对象上的text属性指向选项的人类可读版本.这在后台用于匹配选项以及可访问性目的,因此使用它非常重要.
>您只是检查是否设置了加载选项,如果您只处理“搜索…”文本,但如果正在处理其他任何内容,则无效.我建议改为检查是否缺少图像属性,这似乎是在这些情况下未定义的内容.

并回答您提出的具体问题

What is triggering these bad AJAX calls and how can I stop them?

Select2仅在搜索时触发远程请求,因此必须在代码中生成任何额外请求.在您的情况下,这是因为您试图在结果中显示图像,但您没有处理图像实际上不存在于对象上的情况.

But why is it returning the html when it should be in a “loading” state?

格式化结果中显示的许多通知时使用templateResult方法,包括“搜索…”消息.这允许您对这些消息应用特殊格式,但这也意味着您需要在模板方法中处理它们.通常这不应该是一个问题,因为它定义了通常用于显示选项的人类可读版本的text属性,但是当不使用此属性时会导致问题.

标签：jquery,javascript,ajax,jquery-select2,jquery-select2-4
来源： https://codeday.me/bug/20190702/1359632.html