How to set jquery select2 selector with the selected text instead of the selected id ?

[jc.da...@gmail.com]

Dear all,

I use Select2 with Ajax into a Struts2 WebApp. It works well but it always set the search Struts2 variable with the selected id. And I cannot figure out how to set the Struts2 variable with the text.

JSP:

<td><s:hidden id="query0" name="termQueryList[0].query" style="width:300px" /></td>

JavaScript:

<script type="text/javascript">
$().ready(function() {
$("#query0").select2({
minimumInputLength: 2,
allowClear: true,
multiple: true,

ajax: {
url: "services/json/doSuggest.action",
dataType: 'json',
data: function (term, page) {
return {
q: term,
searchableTag: $('#query0SearchTag').val()

};
},
params: { // extra parameters that will be passed to ajax
contentType: 'application/json; charset=utf-8'
},
results: function (data, page) {
return { results: data };
}
}

}).on("select2-selecting", function(e) {
alert("selecting val=" + e.val + " choice=" + e.object.text);
})

;

});

Data is formatted as follow:
[
{ id:"0", text:"text 0" },
{ id:"1", text:"text 1" },
{ id:"2", text:"text 2" },
.....................
{ id:"n", text:"text n" }
]

When selecting an item from the Select2 popup list, the variable termQueryList[0].query is set to the corresponding id (i.e. 2 if "text 2" was selected.
I would like to set variable termQueryList[0].query to "text 2" when "text 2" is selected.
Thank you in advance for yr attention and any advice on these issue.

Best wishes,

Jean-Claude Dauphin

[Jean-Claude Dauphin]

For thus that could be interested by the solution, I finally find out how to get back the text instead of the id.

https://github.com/ivaynberg/select2/issues/852#issuecomment-13478644

<script type="text/javascript">
          
            $().ready(function() {
               
                  function format(data){
                         return data.text;
                  };

                   $("#query0").select2({
                      minimumInputLength: 2,           
                      allowClear: true,
                      multiple: true,

                      formatResult: format,
                      formatSelection: format,
                      // Function to submit the value (text:) from the selection
                      //  instead of the selected object's ID
                      id: function(object) {
                         return object.text;
                      },
                                     
                      ajax: {
                                               ............................................

Best wishes,

Jean-Claude Dauphin