ajax - Select2 4.0.0 can't select results -

i'm trying use newest version of select2 query site's api , return multiple-select. it's fetching right data , it's formatting dropdown properly, combining 2 keys in returned objects "(a-123) john johnson", dropdown's not responding mouseover or clicks.

i'm using select2.full.min.js , select2.min.css files. purposes of project, i'm including them in directory , accessing them through bundles in cshtml, instead of accessing them via cdn.

html:

<div>     <select class="user-list" multiple="multiple" style="width: 100%">     </select> </div> 

at moment, it's looking this, how want it:

not sure if relevant, when browse generated source code while searching, input looks fine, dropdown's code greyed out though hidden.

per other suggestions i've found on here , elsewhere, i've tried few different solutions. found out how templateresult , templateselection supposed work (not particularly documentation), , tried returning id well, still can't seem select anything, or response when hover on options.

here's wound with, including debugging make sure returned object valid.

js:

        // setup autocomplete/select user filter         $(".user-list").select2({             ajax: {                 url: "[api url]",                 type: "get",                 datatype: "json",                 data: function (params) {                     return {                         search: params.term, // search term                         page: params.page                     };                 },                 processresults: function (data) {                     console.log(json.stringify(data));                     return {                         results: data                     };                 },             },             escapemarkup: function (markup) { return markup; },             id: function (data) { return data.id.tostring(); },             minimuminputlength: 1,             templateresult: function (data, page) {                 return "(" + data.user + ") " + data.name;             },             templateselection: function (data, page) {                 return "(" + data.user + ") " + data.name;             }         }) 

the id guid, , there 2 other fields, i'll call name , user.

data sample:

[     {         "id":"a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1",         "name":"john johnson",         "user":"a-123"     },     {         "id":"b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2",         "name":"tom thompson",         "user":"b-456"     } ] 

i hate add pile of questions seem this, results i've found have been older version different options, , haven't worked me yet.

the way select2 operates uses "id" values of each data object , puts original select element selected option(s). case-sensitive.

by default, displays dropdown options , selected element whatever "text" value of data object. not allow custom formatting.

if (like me) want return different data options, still need return field "id", or re-map field "id" in object returned in processresults option under ajax. use templateresult , templateselection settings other returned data display want.

if return , parse correctly except id, may wind otherwise functional list, unable select options.

the requirements dropdown changed bit project, here's wound up. works fine multiple="multiple" attribute added make multi-select, too.

<select class="select2" style="width:100%; height: 100%;">     <option></option> </select>  $(".select2").select2({     ajax: {         url: "[api url]",         method: "get",         data: function (params) {             return {                 search: params.term             };         },         processresults: function (data) {             return {                 results: data             };         },         cache: true     },     placeholder: "enter user id or name",     templateresult: function(data) {             return "(" + data.user + ") " + data.name;     },     templateselection: function(data) {         return "(" + data.user + ") " + data.name;     } }).ready(function () {     $(".select2-selection__placeholder").text("enter user id or name") }) 

it's possible part of initial issue attempts @ implementing fixes older versions of select2, had different set of options/settings available.

additionally, bit of side-note, "placeholder" attribute doesn't work custom templating. tries force placeholder text result format, shows "(undefined) undefined" code. fix requires empty option , replace text on select2.ready.