javascript - 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.