AutoComplete Async Loading

The AutoComplete below populates the drop-down list asynchronously using the itemsSourceFunction property.

Try typing "ch" or "chi" and waiting a second to see the drop-down.

AutoComplete:

Selected product: None

This feature is especially useful when the number of items is large (thousands or millions of items) and the data is stored in a server database capable of fast searches.

// This file locates: "Scripts/Lesson/C1Input/AutoCompleteAsyncLoading.js".
c1.documentReady(function () {
    var theAutoComplete = wijmo.Control.getControl('#theAutoComplete');
 
    theAutoComplete.itemsSourceFunction = function(query, max, callback) {
        if (!query) {
            callback(null);
            return;
        }
 
        var url = 'https://services.odata.org/V4/Northwind/Northwind.svc/Products';
        wijmo.httpRequest(url, {
            data: {
                $format: 'json',
                $select: 'ProductID,ProductName',
                $filter: 'indexof(ProductName, \'' + query + '\') gt -1'
            },
            success: function(xhr) {
                var response = JSON.parse(xhr.response);
                var arr = response.d ? response.d.results : response.value;
                callback(response.value);
            }
        });
    };
 
    theAutoComplete.selectedIndexChanged.addHandler(function (s, e) {
        var product = theAutoComplete.selectedItem;
        document.getElementById('msg').textContent = product
          ? wijmo.format('{ProductName} (ID: {ProductID})', product)
          : 'None';
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: AutoCompleteAsyncLoading
        public ActionResult AutoCompleteAsyncLoading()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.AutoCompleteAsyncLoading_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.AutoCompleteAsyncLoading_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.AutoCompleteAsyncLoading_Text2)
</p>
 
<label for="theAutoComplete">@Html.Raw(Resources.C1Input.AutoCompleteAsyncLoading_Text3)</label>
@Html.C1().AutoComplete().Id("theAutoComplete").Placeholder(Resources.C1Input.AutoCompleteAsyncLoading_Text4).DisplayMemberPath("ProductName")
<p>
    @Html.Raw(Resources.C1Input.AutoCompleteAsyncLoading_Text5)
</p>
<p>
    @Html.Raw(Resources.C1Input.AutoCompleteAsyncLoading_Text6)
</p>