Select2 js 插件无法 select 任何选项

Question

我正在使用 Select2.js（最新版本）在我的应用程序中实施标记化标记。它工作正常，除了 我无法 select 建议中的任何项目。

我看到很少有答案提到我们需要在配置中包含 "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 函数以将 returned JSON 数据转换为对象一个 id 属性。通常，对象也应该有一个 text 属性，但如果你提供 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" 页面上的 "The id and text properties are strictly enforced" 部分：

您也可以删除 formatSelection 函数。对于 Select2 4.0，它现在应该命名为 templateSelection。这意味着它不会为您调用，但您可能没有注意到，因为您的 formatSelection 函数只是在执行默认情况下所做的事情。

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

你没有显示你的 returned 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 };
},

Select2 js 插件无法 select 任何选项

Select2 js Plugin Not able to select any option

html

javascript

ajax

jquery

jquery-select2