Unable to select a result from the select2 search results

Question

I am using the select2 for on of my search boxes. I'm getting the results from my URL but I'm not able to select an option from it. I want to use the 'product.productName' as the text to be shown after selection. Is there anything that I have missed out or any mistake that I have made. I have included select2.css and select2.min.js,jquery.js

  function dataFormatResult(product) {
        var markup = "<table class='product-result'><tr>";

        markup += "<td class='product-info'><div class='product-title'>" +     product.productName + "</div>";
        if (product.manufacturer !== undefined) {
            markup += "<div class='product-synopsis'>" + product.manufacturer + "</div>";
        }
        else if (product.productOptions !== undefined) {
            markup += "<div class='product-synopsis'>" + product.productOptions + "</div>";
        }
        markup += "</td></tr></table>";
        return markup;
    }

    function dataFormatSelection(product) {
        return product.productName;
    }
    $(document).ready(function() {
        $("#e7").select2({
            placeholder: "Search for a product",
            minimumInputLength: 2,
            ajax: {
                url: myURL,
                dataType: 'json',
                data: function(term,page) {
                    return {
                        productname: term 
                    };
                },
                results: function(data,page) { 

                    return {results: data.result_object};
                }
            },
            formatResult: dataFormatResult, 
            formatSelection: dataFormatSelection, 
            dropdownCssClass: "bigdrop", 
            escapeMarkup: function(m) {
                return m;
            } 
        });
    });

This is my resut_object

"result_object":[{"productName":"samsung galaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Silver;32GB"},{"productName":"samsung salaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Graphite;32GB"},{"productName":"samsung galaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Silver;16GB"}]

Anderaanderea

Answer 1

You are missing id attribute for result data. if it has not, it makes option "unselectable".

Example:

            $('#e7').select2({
                    id: function(e) { return e.productName; },
            });

Dianthus

Saved my time!!... They have terrible documentation!.. Their AJAX example should mention this... – Leucocyte

Telvin, link is broken.. And btw adding ID didn't make a difference for me. – Dislimn

@AlexanderSuraphel This answer happened four years ago and it was supposed to solve the OP problem, in case the link would be broken so I put the example code to point it out, so the reference is not matter. The plugin is also getting update and many things have been changed. Now I have no idea what your problem is. Sorry. – Dianthus

@TelvinNguyen okay. For me removing the link now would make sense. Plus no one comes to SO to solve "the OP" problem. People answer here to help a lot of people. – Dislimn

@AlexanderSuraphel I agree with removing the link. It was supposed to show why the id was required. I'm removing the link since it no longer be available. However, please do not take this personal because it could not help you, please read how the SO answer works carefully stackoverflow.com/help/how-to-answer (Answer the question) – Dianthus

Answer 2

Since I was using AJAX, what worked for me was returning something as the ID on processResults:

$(field).select2({
   ajax: {
        // [..] ajax params here
        processResults: function(data) {
            return {
                results: $.map(data, function(item) {
                    return {
                        // proccessResults NEEDS the attribute id here
                        id: item.code,
                        // [...] other attributes here
                        foo: item.bar,
                    }
                })
            }
        },
    },
});

Kymberlykymograph

Return the ID from the backend solved my problem too. Thanks @Kymberlykymograph – Blood

Answer 3

The id param can be a string related to the object property name, and must be in the root of the object. Text inside data object.

var fruits = [{code: 222, fruit: 'grape', color:'purple', price: 2.2},
  {code: 234,fruit: 'banana', color:'yellow', price: 1.9} ];

$(yourfield).select2(
 {
   id: 'code',
   data: { results: fruits, text: 'fruit' }
 }
);

Bernice

Answer 4

I have faced the same issue,other solution for this issue is:-

In your response object(In above response Product details object) must have an "id" as key and value for that.

Example:- Your above given response object must be like this

{"id":"1","productName":"samsung galaxy s3","manufacturer":"Samsung","productOptions":"Color;Memory","productOptiondesc":"Silver;32GB"}

SO you don't need this id: function(object){return object.key;}

Loricate