Another Remote Data Loading Problem

[m.a....@gmail.com]

I've been hitting my head against this for hours, trying different code and reading through every article and forum post I can find. The problem is probably something small and basic, but I can't figure out what. Exhausted, I'm asking for help.

Tech:
Select2 4.0.3 (from NuGet), .NET 4.5, ASP.NET Webforms

Page:

<script src="/Scripts/select2.min.js"></script>
<link rel="stylesheet" href="<%=ResolveClientUrl("~/Content/css/select2.min.css")%>" />

<script type="text/javascript">
$(function () {
$("#<%=selectThing.ClientID%>").select2({
ajax: {
url: "/Test.asmx/GetSelections",
type: "POST",
delay: 250,
params: {
contentType: 'application/json; charset=utf-8'
},
dataType: "json",
data: function (params, page) {
return {
searchTerm: params.term,
pageLimit: 10
}
},
processResults: function (data, params) {
return {
results: data
};
},
},
minimumInputLength: 0,
cache: false
});
});
</script>
<div>
<label class="fieldLabel">Serial</label>
<select id="selectThing" class="select2-dropdown" runat="server"></select>
</div>

Raw (Correctly Queried) Response from GetSelections:
[{id:1, text:'1'}]

Select2's Response:
"The result could not be loaded."

Console Errors:
None.

Notes:
The control is being loaded properly (as far as I can tell), with everything from select2.min.js and .css coming in. I tried putting an alert() in processResults, and it never executes.

If you're unfamiliar with ASP.NET, "<%=selectThing.ClientID%>" is returning the ID of the selectThing control. It's correct on the page--every time.

What am I doing wrong?

[m.a....@gmail.com]

After taking a weekend of rest, I came back to the problem and found the resolution. Just in case this helps anyone in the future, here's the working code:

Page:

<script src="/Scripts/select2.min.js"></script>
<link rel="stylesheet" href="<%=ResolveClientUrl("~/Content/css/select2.min.css")%>" />

<script type="text/javascript">
$(function () {
$("#<%=selectThing.ClientID%>").select2({
ajax: {
url: "/Test.asmx/GetSelections",
type: "POST",
delay: 250,
params: {
contentType: 'application/json; charset=utf-8'
},
dataType: "json",
data: function (params, page) {
return {

searchTerm: !params.term ? '' : params.term,
pageLimit: 10

}
}
},
minimumInputLength: 0,
cache: false
});
});
</script>
<div>
<label class="fieldLabel">Serial</label>
<select id="selectThing" class="select2-dropdown" runat="server"></select>
</div>

Raw Response from GetSelections:
{"results": [{"id":1, "text":"1"},{"id":2, "text":"2"},{"id":3, "text":"3"}]}

processResults was removed, which was unnecessary in this case, since the results are coming in already processed and ready for select2 to consume.
searchTerm has a ternary null check so that an unfiltered list will show all values available.
The raw result is now formatted as an object with a "results" attribute containing the item/name array, and the JSON uses double-quotes.

For those using ASP.NET, I should note that I had to add the following to the web.config to get the .asmx to properly return JSON:

<configuration>
<system.webServer>
<handlers>
<add name="ScriptHandlerFactory"
verb="*"
path="*.asmx"
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
resourceType="Unspecified" />
</handlers>
</system.webServer>
</configuration>

My Test service was built as such:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class Test : WebService {

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void GetSelections(string searchTerm, int pageLimit) {