AutoComplete

The AutoComplete control extends the ComboBox to provide two additional features:

  1. It automatically filters the items in the drop-down list to include only those that match the current user input, and
  2. It supports populating the drop-down asynchromously based on the current user input and changing the search logic (by default, the ComboBox looks for items that start with the user input, while AutoComplete looks for items that contain the user input).

The AutoComplete and ComboBox controls below are bound to the same itemsSource. Try typing "un" into either control to see the difference:


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: AutoComplete
        public ActionResult AutoComplete()
        {
            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
@model IEnumerable<Gdp>
 
<h1>
    @Html.Raw(Resources.C1Input.AutoComplete_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.AutoComplete_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Input.AutoComplete_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.AutoComplete_Text3)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1Input.AutoComplete_Text4)
</p>
<label for="theAutoComplete">@Html.Raw(Resources.C1Input.AutoComplete_Text5)</label>
@(Html.C1().AutoComplete<Gdp>().Id("theAutoComplete").Bind(Model).DisplayMemberPath("Country"))
<br />
<label for="theCombo">@Html.Raw(Resources.C1Input.AutoComplete_Text6)</label>
@(Html.C1().ComboBox<Gdp>().Id("theCombo").Bind(Model).DisplayMemberPath("Country"))