Custom Search

The first AutoComplete controls below uses the default search algorithm. The second uses the itemsSourceFunction property to customize the search algorithm. Instead of looking for items that contain the user input, it looks for items that start with it (like the ComboBox):

Compare the two by typing a string such as "no" or "un".

Default:
Custom:

// This file locates: "Scripts/Lesson/C1Input/AutoCompleteCustomSearch.js".
c1.documentReady(function () {
    var theAutoComplete = wijmo.Control.getControl('#theAutoComplete');
    var theAutoCompleteCustom = wijmo.Control.getControl('#theAutoCompleteCustom');
    var theCollectionView = c1.getService('theCollectionView');
    var allItems = theCollectionView.items;
 
    theAutoCompleteCustom.itemsSourceFunction = function (query, max, callback) {
 
        // empty query? no results
        if (!query) {
            callback(null);
            return;
        }
 
        // find items that start with the user input
        var queryItems = [],
            rx = new RegExp('^' + query, 'i');
        for (var i = 0; i < allItems.length && queryItems.length < max; i++) {
            if (rx.test(allItems[i].Country)) {
                queryItems.push(allItems[i]);
            }
        }
        callback(queryItems);
    };
});

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

@model IEnumerable<Gdp>
 
<h1>
    @Html.Raw(Resources.C1Input.AutoCompleteCustomSearch_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.AutoCompleteCustomSearch_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.AutoCompleteCustomSearch_Text2)
</p>
 
<label for="theAutoComplete">@Html.Raw(Resources.C1Input.AutoCompleteCustomSearch_Text3)</label>
@(Html.C1().AutoComplete<Gdp>().Id("theAutoComplete").Bind(Model).DisplayMemberPath("Country"))
<br>
<label for="theAutoCompleteCustom">@Html.Raw(Resources.C1Input.AutoCompleteCustomSearch_Text4)</label>
@(Html.C1().AutoComplete().Id("theAutoCompleteCustom").DisplayMemberPath("Country"))
@(Html.C1().CollectionViewService<Gdp>().Id("theCollectionView").Bind(Model))