Unable to select a result from the select2 search results
html, jquery-select2, json, php
Solution
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; },
});
Problem
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"}] ```