select2、不能selectAJAX结果

Question

我正在尝试使用 ajax 创建一个 select2 列表。我遵循 select2 此处的文档 https://select2.org/data-sources/ajax。

我无法 select 进入列表。我相信这一定是 templateResult: formatRepo 或 templateSelection: formatRepoSelection 中的某个问题。

我已经在 Whosebug 中搜索过类似案例，但找不到真正的解决方案。

这是 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>

Answer 1

问题是因为 Select2 数据需要包含 id 和 text 属性才能正确识别值。因此，您的 processResults 处理程序函数应如下所示：

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、不能selectAJAX结果

select2, can't select AJAX result

html

javascript

jquery

jquery-select2