I am trying to implement data dropdown using select2.

<input id="myInput" />

My JQuery Code

$('#myInput').select2({      
        minimumInputLength: 3,      
        dataType: "json",      
        quietMillis: 100,      
        ajax: {
            url: "/api/data/source",            
            data: function (term, page) {
                  return { q: term // search term };            
            },
            results: function(data) {
               var options = [];
               data = JSON.parse(data);
               $.each(data, function(id, text) {
                     options.push({ text: text, id: id });
               });
               return { results: options };  
            },
            cache: true
     }
 });

This is creating me a div block with <ul> <li> elements

Current

<div>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

Expected

<div>
    <ul>
        <li id="1">Option 1</li>
        <li id="2">Option 2</li>
        <li id="3">Option 3</li>
    </ul>
</div>

I am not seeing

id="1"

in the li element.
Can someone help me in fixing this problem?

I am using
Select2 3.3.1 Version.
jQuery 1.8