AutoComplete delay, minLength, and maxItems
By default, the AutoComplete control starts searching for matches 500ms after the user types at least two characters into the control, and stops searching after finding six matches.
You can change these defaults by changing the values of the delay, minLength, and maxItems properties:
- C1Input/AutoCompleteSearchParameters.js
- AutoCompleteSearchParametersController.cs
- AutoCompleteSearchParameters.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // This file locates: "Scripts/Lesson/C1Input/AutoCompleteSearchParameters.js". c1.documentReady(function () { var theAutoComplete = wijmo.Control.getControl( '#theAutoComplete' ); var theDelay = wijmo.Control.getControl( '#theDelay' ); var theMinLength = wijmo.Control.getControl( '#theMinLength' ); var theMaxItems = wijmo.Control.getControl( '#theMaxItems' ); theDelay.value = theAutoComplete.delay; theDelay.valueChanged.addHandler(function (s, e) { theAutoComplete.delay = s.value; }); theMinLength.value = theAutoComplete.minLength; theMinLength.valueChanged.addHandler(function (s, e) { theAutoComplete.minLength = s.value; }); theMaxItems.value = theAutoComplete.maxItems; theMaxItems.valueChanged.addHandler(function (s, e) { theAutoComplete.maxItems = s.value; }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1InputController : Controller { // GET: AutoCompleteSearchParameters public ActionResult AutoCompleteSearchParameters() { return View(Models.Gdp.GetData()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | @model IEnumerable< Gdp > < h1 > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Title) </ h1 > < p > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Text1) </ p > < p > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Text2) </ p > < div class = "demo-settings" > < label for = "theDelay" > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Text3)</ label > @Html .C1().InputNumber().Id( "theDelay" ).Min(0).Max(1500).Step(100) < br > < label for = "theMinLength" > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Text4)</ label > @Html .C1().InputNumber().Id( "theMinLength" ).Min(1).Max(100).Step(1) < br > < label for = "theMaxItems" > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Text5)</ label > @Html .C1().InputNumber().Id( "theMaxItems" ).Min(1).Max(12).Step(1) </ div > < label for = "theAutoComplete" > @Html .Raw(Resources.C1Input.AutoCompleteSearchParameters_Text6)</ label > @ (Html.C1().AutoComplete< Gdp >().Id( "theAutoComplete" ).Bind(Model).DisplayMemberPath( "Country" ).SearchMemberPath( "Country,Continent" )) |