javascript - Select2 js 插件无法选择任何选项

Question

我正在使用 Select2.js (最新版本)在我的应用程序中实现标记化标记。它工作正常，除了我无法从建议中选择任何项目。

我看到很少有答案提到我们需要在配置中包含“id”。它似乎对我不起作用。

我的代码是:

$("#interest").select2({ ajax: {
            url: "get-interests",
            dataType: 'json',
            delay: 250,
            data: function (params) {
              return {
                q: params.term, // search term
                page: params.page
              };
            },
            processResults: function (data, page) {
              // parse the results into the format expected by Select2.
              // since we are using custom formatting functions we do not need to
              // alter the remote JSON data
              return {
                results: data
              };
            },
            cache: true
          },
          escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
          placeholder:{
              id: "-1",
              text: "Add your interest.."
          } ,
          tags: true,
          tokenSeparators: [',', ' '],
          id: function(data) { 
              alert(JSON.stringify(data));
              return data.interestId; 
          },
          templateResult: function(post) {
              // return html markup for individual result item
              var markup ="";
              if(String(post.description) !== 'undefined') {
                 markup = '<p><b>' + post.text + '</b>  : ' + post.description + '</p>';
              } else {
                 markup = '<p><b>' + post.text + '</b></p>';
              }
              return markup;
           },
           formatSelection: function(post) {
              // This shows up in the select box
              return post.text;
           }

我在上面的配置中做错了什么？

Answer 1

与您在代码中放置的注释相反，对于 Select2 4.0，您确实需要将代码添加到 processResults函数将返回的 JSON 数据转换为带有 id 的对象属性(property)。通常，对象也应该有一个 text。属性(property)，但如果您提供 templateResult，他们就不必这样做和 templateSelection功能。

I saw few answers in which it was mentioned that we need to include "id" in our configuration. it doesn't seems to be working for me.

这些答案对于以前版本的 Select2 是正确的，但是对于 Select2 v4.0，id不再支持功能。请参阅 "4.0 Anouncement" 上的“严格执行 id 和文本属性”部分页:

您还可以删除 formatSelection功能。对于 Select2 4.0，它现在应该命名为 templateSelection .这意味着它没有被要求为您服务，但您可能没有注意到，因为您的 formatSelection函数只是在做默认情况下所做的事情。

---

processResults函数应该返回一个带有 results 的对象属性，它被设置为一个对象数组。这些对象都需要有一个 id属性(但它们也可以有其他属性)。

您没有显示您返回的内容 data看起来像，但从你的 id 来看和 templateResult函数，它似乎是具有以下属性的对象数组:interestId , text和 description .在那种情况下，您的 processResults函数可能看起来像这样:

// This builds a new array of new objects.
processResults: function(data, page) {
    return {
        results: $.map(data, function(post) {
            return {
                id: post.interestId,
                text: post.text,
                description: post.description
            };
        })
    };
},

或者这个:

// This just adds an `id` property to the objects in the existing array.
processResults: function(data, page) {
    $.each(data, function(i, post) {
        post.id = post.interestId;
    });
    return { results: data };
},