The jQuery UI library provides a useful Autocomplete control which can be plugged in
into out forms, the jQuery
UI Autocompete can
be used with the Textbox control, to display hints to the user as they type
values into the TextBox.
In the following example I have tried to cover all the possible scenarios which we come across while using an Autocomplete control.
In the following example I have tried to cover all the possible scenarios which we come across while using an Autocomplete control.
Running the sample
To run the sample at your desk, create a
new Asp.net page; edit the .aspx page, copy the code below (AutoComplete.aspx)
into the .aspx page, change reference of
the jQuery & jQuery UI files to point to your local directory.
Create a new web service, copy the web methods in the code (CountriesWebService.asmx.cs) into the web service, modify the .aspx page to map to the new web service.
Build and run the application, see the behavior of each of the Autocomplete controls.
Create a new web service, copy the web methods in the code (CountriesWebService.asmx.cs) into the web service, modify the .aspx page to map to the new web service.
Build and run the application, see the behavior of each of the Autocomplete controls.
Code (AutoComplete.aspx)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
UI Autocomplete</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="Stylesheet.css" rel="Stylesheet" />
<script type="text/javascript">
var
arrCountries = [
"Albania",
"Algeria",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Argentina",
"Armenia",
"Aruba",
"Australia",
"Azerbaijan"
];
//
$(document).ready(function() {
//
// Simple
AutoComplete
$("#txtSimpleAutocomplete").autocomplete({
source: arrCountries
});
});
//
//
AutoComplete Select Event
$("#txtAutocompleteSelect").autocomplete
({
source: arrCountries,
select: function(event, ui) {
alert('Selected Value: ' + ui.item.label);
alert('Textbox Value: ' + this.value);
}
});
//
//
AutoComplete minLength
$("#txtAutocompleteLength").autocomplete
({
source: arrCountries,
minLength: 2
});
//
//
AutoComplete Position
// my -
refers to - AutoComplete Control
// at -
refers to - Text Box Control
// offset
- refers to - (x,y) gap between the 2 Controls
// Left
Top of Autocomplete positioned with Right Top of TextBox,
with Offset 1px.
with Offset 1px.
$("#txtAutocompletePosition").autocomplete
({
source: arrCountries,
position:
{
my: "left top",
at: "right top",
offset: "1 0"
}
});
//
//
AutoComplete Delay (Default 1000)
$("#txtAutocompleteDelay").autocomplete
({
source: arrCountries,
delay: 1000
});
//
//
AutoComplete Server Data, Client Filter
$.ajax({
type: "POST",
url: "CountriesWebService.asmx/GetCountries",
dataType: "jsond",
data: "{}",
contentType: "application/json; charset=utf-8",
converters: {
"json jsond": function(msg) {
"json jsond": function(msg) {
return msg.hasOwnProperty('d')
? msg.d : msg;
}
},
success: function(data) {
var
datafromServer = data.split(",");
$("[id$='txtAutocompleteServer']").autocomplete({
source: datafromServer
});
},
error: function(XMLHttpRequest,
textStatus, errorThrown) {
var
errorMessage = "Ajax error: " + this.url + " :
" + textStatus + " : "
+ errorThrown + " : " +
XMLHttpRequest.statusText + " : "
+ XMLHttpRequest.status;
if
(XMLHttpRequest.status != "0" ||
errorThrown != "abort") {
alert(errorMessage);
}
}
});
//
//
AutoComplete Server Data, Server Filter (List)
$("#txtAutocompleteServerList").autocomplete
({
source: function(request, response) {
$.ajax({
type: "POST",
url: "CountriesWebService.asmx/GetCountryList",
dataType: "json",
data: "{ 'filterKey': '" + request.term + "' }",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return
data; },
success: function(data) {
response($.map(data.d, function(item) {
return { value: item}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var errorMessage = "Ajax
error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + XMLHttpRequest.statusText + " : " + XMLHttpRequest.status;
if
(XMLHttpRequest.status != "0" ||
errorThrown != "abort") {
alert(errorMessage);
}
}
});
},
delay: 100
});
//
//
AutoComplete Server Data, Server Filter (Array)
$("#txtAutocompleteServerArray").autocomplete
({
source: function(request, response) {
$.ajax({
type: "POST",
url: "CountriesWebService.asmx/GetCountryStringList",
dataType: "json",
data: "{ 'filterKey': '" + request.term + "' }",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return
data; },
success: function(data) {
response($.map(data.d, function(item) {
return { value: item}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var errorMessage = "Ajax
error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + XMLHttpRequest.statusText + " : " + XMLHttpRequest.status;
if (XMLHttpRequest.status != "0"
|| errorThrown != "abort") {
alert(errorMessage);
}
}
});
},
delay: 100
});
//
//
AutoComplete Server Data, Server Filter (Object)
$("#txtAutocompleteServerObject").autocomplete
({
source: function(request, response) {
$.ajax({
type: "POST",
url: "CountriesWebService.asmx/GetCountryObjectList",
dataType: "json",
data: "{ 'filterKey': '" + request.term + "' }",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return
data; },
success: function(data) {
response($.map(data.d, function(item) {
return { value: item.CountryCode }
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var errorMessage = "Ajax
error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + XMLHttpRequest.statusText + " : " + XMLHttpRequest.status;
if
(XMLHttpRequest.status != "0" ||
errorThrown != "abort") {
alert(errorMessage);
}
}
});
},
delay: 100
});
});
</script>
</head>
<body>
<form id="frmAutocomplete" runat="server">
<table width="600">
<tr>
<td>Simple
Autocomplete: </td>
<td>
<asp:TextBox
ID="txtSimpleAutocomplete"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Select event: </td>
<td>
<asp:TextBox
ID="txtAutocompleteSelect"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Minimum Length (2): </td>
<td>
<asp:TextBox
ID="txtAutocompleteLength"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Positioning: </td>
<td>
<asp:TextBox
ID="txtAutocompletePosition"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Delay (1 Second): </td>
<td>
<asp:TextBox
ID="txtAutocompleteDelay"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Server Source, Client Filter: </td>
<td>
<asp:TextBox
ID="txtAutocompleteServer"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Server Source, Server Filter (List): </td>
<td>
<asp:TextBox
ID="txtAutocompleteServerList"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Server Source, Server Filter (Array): </td>
<td>
<asp:TextBox
ID="txtAutocompleteServerArray"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Autocomplete
Server Source, Server Filter (Object): </td>
<td>
<asp:TextBox
ID="txtAutocompleteServerObject"
runat="server"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>
Code (CountriesWebService.asmx.cs)
Code (CountriesWebService.asmx.cs)
namespace jQuery
{
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this
Web Service to be called from script, using ASP.NET
AJAX, uncomment the following line.
AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class CountriesWebService
: System.Web.Services.WebService
{
[WebMethod]
public string GetCountries()
{
return
"Belgium,Belize,Bermuda,Bolivia,Botswana,Brazil,Burundi,Burkina";
}
//
[WebMethod]
public List<string>
GetCountryList(string filterKey)
{
List<string> lstCountry = new
List<string>();
string
strCountryList = string.Empty;
//
lstCountry.Add("Albania");
lstCountry.Add("Algeria");
lstCountry.Add("Andorra");
lstCountry.Add("Angola");
lstCountry.Add("Anguilla");
lstCountry.Add("Antarctica");
lstCountry.Add("Argentina");
lstCountry.Add("Armenia");
lstCountry.Add("Aruba");
lstCountry.Add("Belgium");
lstCountry.Add("Belize");
lstCountry.Add("Bermuda");
lstCountry.Add("Bolivia");
lstCountry.Add("Botswana");
lstCountry.Add("Brazil");
lstCountry.Add("Burundi");
lstCountry.Add("Burkina");
//
var
filteredCountries = from c in lstCountry
where
c.StartsWith(filterKey)
select
c;
//
return
filteredCountries.ToList();
}
//
[WebMethod]
public string[] GetCountryStringList(string filterKey)
{
List<string> lstCountry = new
List<string>();
string
strCountryList = string.Empty;
//
lstCountry.Add("Albania");
lstCountry.Add("Algeria");
lstCountry.Add("Andorra");
lstCountry.Add("Angola");
lstCountry.Add("Anguilla");
lstCountry.Add("Antarctica");
lstCountry.Add("Argentina");
lstCountry.Add("Armenia");
lstCountry.Add("Aruba");
lstCountry.Add("Belgium");
lstCountry.Add("Belize");
lstCountry.Add("Bermuda");
lstCountry.Add("Bolivia");
lstCountry.Add("Botswana");
lstCountry.Add("Brazil");
lstCountry.Add("Burundi");
lstCountry.Add("Burkina");
//
var
filteredCountries = from c in lstCountry
where c.StartsWith(filterKey)
select c;
//
return
filteredCountries.ToArray();
}
//
//
[WebMethod]
public List<clsCountry>
GetCountryObjectList(string filterKey)
{
List<clsCountry> lstCountry = new List<clsCountry>();
string
strCountryList = string.Empty;
//
lstCountry.Add(new clsCountry("A1", "Albania"));
lstCountry.Add(new clsCountry("A2", "Algeria"));
lstCountry.Add(new clsCountry("A3", "Andorra"));
lstCountry.Add(new clsCountry("A4", "Angola"));
lstCountry.Add(new clsCountry("A5", "Anguilla"));
lstCountry.Add(new clsCountry("A6", "Antarctica"));
lstCountry.Add(new clsCountry("A7", "Argentina"));
lstCountry.Add(new clsCountry("A8", "Armenia"));
lstCountry.Add(new clsCountry("A9", "Aruba"));
lstCountry.Add(new clsCountry("B1", "Belgium"));
lstCountry.Add(new clsCountry("B2", "Belize"));
lstCountry.Add(new clsCountry("B3", "Bermuda"));
lstCountry.Add(new clsCountry("B4", "Bolivia"));
lstCountry.Add(new clsCountry("B5", "Botswana"));
lstCountry.Add(new clsCountry("B6", "Brazil"));
lstCountry.Add(new clsCountry("B7", "Burundi"));
lstCountry.Add(new clsCountry("B8", "Burkina"));
//
var
filteredCountries = from c in lstCountry
where c.CountryName.StartsWith(filterKey)
select c;
//
return
filteredCountries.ToList();
}
}
//
public class clsCountry
{
public string _CountryCode;
public string _CountryName;
//
public
clsCountry(string strCode, string strName)
{
this._CountryCode
= strCode;
this._CountryName
= strName;
}
//
public string CountryCode
{
get
{ return _CountryCode; }
set
{ _CountryCode = value; }
}
//
public string CountryName
{
get
{ return _CountryName; }
set
{ _CountryName = value; }
}
}
}Related Posts
No comments:
Post a Comment