<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="TestPages_AutoComplete" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.working{background:url('../images/ajax-loader-2.gif') no-repeat right center;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
AutoComplete("#txtExAutoComlete");
});
function AutoComplete(control) {
$(control).autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "AutoComplete.aspx/GetObjectDTO",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var result = data.d;
response($.map(data.d, function (item) {
return {
label: item.firstname,
desc: item.firstname,
value: item.lastname
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
},
change: function (event, ui) {
},
search: function () { $(this).addClass('progress'); },
open: function () { $(this).removeClass('progress'); },
response: function () { $(this).removeClass('progress'); }
});
}
//function AutoComplete(control) {
// $(control).autocomplete({
// source: function (request, response) {
// $.ajax({
// type: "POST",
// url: "AutoComplete.aspx/GetObjectDTO",
// data: "{}",
// contentType: "application/json; charset=utf-8",
// dataType: "json",
// success: function (data) {
// var result = data.d;
// response($.map(data.d, function (item) {
// return {
// label: item,
// value: item
// }
// }));
// }
// });
// },
// minLength: 2,
// select: function (event, ui) {
// },
// change: function (event, ui) {
// },
// search: function () { $(this).addClass('progress'); },
// open: function () { $(this).removeClass('progress'); },
// response: function () { $(this).removeClass('progress'); }
// });
//}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtExAutoComlete" runat="server" ClientIDMode="Static" Style="text-transform: capitalize;" TabIndex="1"></asp:TextBox>
</div>
</form>
</body>
</html>
and the C# code file is below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TestPages_AutoComplete : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static List<string> GetData()
{
string[] array = new string[] { "Art", "Aerobics", "Asia", "Assistant", "AssistantManager", "Bakery", "Bakes", "Barbaq", "Bar", "Cafeteria Manager", "Cofee", "Costarica", "Casino" };
// Here I am returning as a simple list, u can return any
return array.ToList<string>();
}
[System.Web.Services.WebMethod]
public static IList<CustomerDTO> GetObjectDTO()
{
IList<CustomerDTO> lstDTO = new List<CustomerDTO>();
CustomerDTO _cust = new CustomerDTO();
_cust.firstname = "Vivek";
_cust.lastname = "Tripathi";
lstDTO.Add(_cust);
_cust = new CustomerDTO();
_cust.firstname = "Neeraj";
_cust.lastname = "Mishra";
lstDTO.Add(_cust);
return lstDTO;
}
}
public class CustomerDTO
{
public string firstname { get; set; }
public string lastname { get; set; }
}