Utilize HTML5 DataList and jQuery Ajax to Create Autocomplete in ASP.NET MVC
In data entry forms involving textboxes with predictable values one can use
autocomplete to assist user pick an existing value. HTML5 introduces <datalist>
element that can come handy while implementing autocomplete. The <datalist>
element holds a list of options and can be attached with a textbox using list
attribute. By adding a bit of jQuery Ajax you can dynamically populate the
options in a <datalist>. This article shows you how to do just that.
HTML5 <datalist> element is used as shown in the following markup.
<input type="text" list="datalist1" />
<datalist id="datalist1">
<option value="US" label="United States" />
<option value="UK" label="United Kingdom" />
<option value="IN" label="India" />
</datalist>
At runtime the above markup shows an autocomplete as shown below:
Once you select an option from the list, the textbox is filled with the
value. The <datalist> and its <option> elements are statically placed in the
above markup. If you wish to dynamically populate the <datalist> based on the
value entered in the textbox, you need to make an Ajax call to the server and
fetch the required data.
Consider the following HTML markup that has a textbox and an empty <datalist>.
<h1>Autocomplete Example</h1>
<input id="companyName" list="companyList" />
<datalist id="companyList"></datalist>
To dynamically populate the <datalist> you can add the following jQuery code:
$(document).ready(function () {
$("#companyName").on("input", function () {
var options = {};
options.url = "/home/getcompanylist";
options.type = "GET";
options.data = { "criteria": $("#companyName").val() };
options.dataType = "json";
options.success = function (data) {
$("#companyList").empty();
for(var i=0;i<data.length;i++)
{
$("#companyList").append("<option value='" +
data[i].CompanyName + "'></option>");
}
};
$.ajax(options);
});
});
The above jQuery code wires the input event handler for the companyName
textbox. The code makes an Ajax call to an MVC action method - GetCompanyList().
This action method returns a list of CompanyName values from Customers table of
the Northwind database. While making the Ajax call you pass the textbox value to
the action method as the search criteria. The success function receives an array
of JavaScript objects. Each object has a single property - CompanyName - that is
then filled in <option> elements of companyList.
The GetCompanyList() action method finds all the company names containing the
entered text. The GetCompanyList() action is shown below:
public JsonResult GetCompanyList(string criteria)
{
NorthwindEntities db = new NorthwindEntities();
var query = (from c in db.Customers
where c.CompanyName.Contains(criteria)
orderby c.CompanyName ascending
select new { c.CompanyName }).Distinct();
return Json(query.ToList(),JsonRequestBehavior.AllowGet);
}
Notice that GetCompanyList() action returns JsonResult using Json() method.
Also notice that JsonRequestBehavior is set to AllowGet so that GET requests can
call this method.
That's it! You can now run the application and test whether it dynamically
displays the autocomplete. The following figure shows a sample run.
