CODEWITHSUNDEEP
javascriptjqueryajaxhtmljquery-select2
user3035305
user3035305

Reputation: 295

Select2 js Plugin Not able to select any option

I am using Select2.js(latest version) to implement tokenized tagging in my application. It is working fine except, I am not able to select any item from the suggestions.

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.

My code is :

$("#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;
           }

What I am doing wrong in above configuration?

Upvotes: 1

Views: 526

Answers (1)

John S
John S

Reputation: 21482

Contrary to the comment you placed in your code, with Select2 4.0 you do need to add code to the processResults function to convert the returned JSON data to objects with an id property. Normally, the objects should also have a text property, but they don't have to if you supply the templateResult and templateSelection functions.

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.

Those answers were correct for previous versions of Select2, but with with Select2 v4.0, the id function is no longer supported. See the "The id and text properties are strictly enforced" section on the the "4.0 Anouncement" page:

You can also remove the formatSelection function. With Select2 4.0 it should now be named templateSelection. That means it is not getting called for you, but you probably didn't notice that because your formatSelection function is just doing what is done by default anyway.

The processResults function should return an object with a results property, which is set to an array of objects. Those objects all need to have an id property (but they can have other properties too).

You don't show what your returned data looks like, but judging from your id and templateResult functions, it appears to be an array of objects with the following properties: interestId, text and description. In that case your processResults function could look something like this:

// 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
            };
        })
    };
},

Or this:

// 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 };
},

Upvotes: 2

Related Questions