How to create AutoComplete TextBox with ASP.NET and jQuery UI

This article explains how to use JQuery UI AutoComplete widget

AutoComplete – A feature that suggests text automatically based on the first few characters that a user types.

Step:1 Add following code in “default.aspx” page

<linkhref=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/&gt;

$(function () {
$(“[id$=txtAuto]”).autocomplete({
source: function (request, response) {
$.ajax({
url: “NameList.asmx/GetNameList”,
data: “{ ‘Name’: ‘” + request.term + “‘ }”,
dataType: “json”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
async: true,
success: function (data) {
var Details = [];
for (i = 0; i

Add HTML Code:

Enter Name:

Step:2 Add Web Service and write following code in it.

[WebMethod]
public List GetNameList(string Name)
{
var emp = new UserNameList();
var fetchName = emp.GetEmpList()
.Where(m => m.Name.ToLower().StartsWith(Name.ToLower()));  returnfetchName.ToList();
}

public class UserNameList
{
public int ID { get; set; }
public string Name { get; set; }
public List GetEmpList()
{
List emp = new List();
emp.Add(new UserNameList() { ID = 1, Name = “Arjun” });
emp.Add(new UserNameList() { ID = 2, Name = “Aaryan” });
emp.Add(new UserNameList() { ID = 3, Name = “Anoop” });
emp.Add(new UserNameList() { ID = 4, Name = “Bob” });
emp.Add(new UserNameList() { ID = 5, Name = “Boby” });
emp.Add(new UserNameList() { ID = 6, Name = “Cristen” });
emp.Add(new UserNameList() { ID = 7, Name = “Cris” });
return emp;
}
}

 Now run the application and check the output.It would be like this