How to set default value on an input box with select2 initialized on it?

Question

How do I set default value on an input box with select2? Here is my HTML:

<input type="text" id="itemId0" value="Item no. 1"> 

and my javascript:

$("#itemId0").select2({     placeholder: 'Select a product',     formatResult: productFormatResult,     formatSelection: productFormatSelection,     dropdownClass: 'bigdrop',     escapeMarkup: function(m) { return m; },     minimumInputLength:1,     ajax: {         url: '/api/productSearch',         dataType: 'json',         data: function(term, page) {             return {                 q: term             };           },           results: function(data, page) {             return {results:data};         }        }    });  function productFormatResult(product) {    var html = "<table><tr>";    html += "<td>";    html += product.itemName ;    html += "</td></tr></table>";    return html; }  function productFormatSelection(product) {     var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";     return selected + product.itemName; } 

Here is the issue:

If I won't initialize my input box into a select2 box, I can display the default value of my input box which is "Item no. 1":

but when I initialize it with select2 eg. $("#itemId0").select2({code here}); I can't then display the default value of my text box:

Anyone knows how can I display the default value please?

Answer 1

You need to utilize the initSelection method as described in Select2's documentation.

From the documentation:

Called when Select2 is created to allow the user to initialize the selection based on the value of the element select2 is attached to.

In your case, take a look at the Loading Remote Data example as it shows how to incorporate it along with AJAX requests.

I hope this helps.

Answer 2

Old initial selections with initSelection

In the past, Select2 required an option called initSelection that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This has been replaced by the current method on the data adapter.

{   initSelection : function (element, callback) {     var data = [];     $(element.val()).each(function () {       data.push({id: this, text: this});     });     callback(data);   } } 

You can use the set value too.

You should directly call .val on the underlying element instead. If you needed the second parameter (triggerChange), you should also call .trigger("change") on the element.

$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1"); 

Refs:

• https://select2.github.io/announcements-4.0.html
• https://github.com/select2/select2/issues/2086
• http://jsfiddle.net/F46NA/7/