This article explains jQuery autocomplete with multiple fields using Asp.Net C#.
Scenario : Listing business titles for a specific city/state location.
Initially I used AJAX CONTROL TOOLKIT (ACT) but I ran in to many issues and finally decided to use jQuery approach which really saved my time.
You can Download the complete source code from here
Add jQuery assets on your page.
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
jQuery Code for consuming web service.
<script type="text/javascript">
$(function () {
var search = $("#<%=txtSearch.ClientID%>");
var location = $("#<%=txtLocation.ClientID %>");
search.autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/") %>AutoCompleteService.asmx/GetKeyWords',
data: "{ 'keyword': '" + search.val() + "', 'location' : '" + location.val() + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
if (data.d != null) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
}
},
error: function (XMLHttpRequest, textStatus, error) {
//alert(textStatus);
}
});
},
minLength: 1
});
location.autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/") %>AutoCompleteService.asmx/GetLocations',
data: "{ 'location': '" + location.val() + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
if (data.d != null) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// alert(textStatus);
}
});
},
minLength: 1
});
});
</script>
Code-behind for ASMX class (don’t forget to uncomment System.Web.Script.Services.ScriptService)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;
using System.Collections;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService {
public AutoCompleteService () {
}
IDictionary<string, string[]> LoadItems()
{
IDictionary<string, string[]> items = new Dictionary<string, string[]>();
items.Add("Newyork", new string[]
{
"Applebee's", "Apiary", "Brenda's French Soul Food","TGI Friday's","Cafe Venue"
});
items.Add("Los Angeles", new string[]
{
"Los 1", "Los 2", "Los 3","TGI Friday's","Cafe Venue"
});
items.Add("Las Vegas", new string[]
{
"Los 1", "Los 2", "Los 3","TGI Friday's","Cafe Venue"
});
return items;
}
[WebMethod]
public string[] GetKeyWords(string keyword, string location)
{
var items = LoadItems();
if (items != null && items.Count > 0)
{
//Get all items for a specific location
var result = (from item in items
where item.Key.Equals(location, StringComparison.OrdinalIgnoreCase)
select item.Value)
.FirstOrDefault();
//check whether the items start with the keyword
return result.Where
(
o => o.StartsWith(keyword, StringComparison.OrdinalIgnoreCase)
).ToArray<string>();
}
return null;
}
[WebMethod]
public string[] GetLocations(string location)
{
var items = LoadItems();
if (items != null && items.Count > 0)
{
//check whether the items start with the location
return (from item in items
where item.Key.StartsWith(location, StringComparison.OrdinalIgnoreCase)
select item.Key).ToArray<string>();
}
return null;
}
}
You can Download the complete source code from here
Hope this help and If you have any comments, please feel free to write your feedback.
Thanks
Deepu
Deepu Madhusoodanan's Blog 