In this post Asp.Net jQuery
UI Autocomplete with Asp.net Web Service returning List Object we shall see on how populate a jQuery Autocomplete control
using server side data exposed by an Asp.net web service, where the web service
returns a LIST object.
In this
example, the data will be initially loaded by calling the Asp.Net web service, also
the subsequent filters will be done in the server side, the letters types by
the user will be sent to the web-method and the filtering will happen at the
server side.
Create an .aspx page, add a TextBox to the page and add the below jQuery script. Change the references of the jQuery library files to map to your local path.
Create an asp.net web service, add the web-method to the service, make sure that you change the name of the web-method in the jQuery script to call your web-method.
Create an .aspx page, add a TextBox to the page and add the below jQuery script. Change the references of the jQuery library files to map to your local path.
Create an asp.net web service, add the web-method to the service, make sure that you change the name of the web-method in the jQuery script to call your web-method.
Build and run the application. Notice
that the Autocomplete options are displayed using data returned from the web
service.
.Aspx page
.Aspx page
<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" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
//
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
});
});
</script>
</script>
</head>
<body>
<form id=" frmAutocomplete" runat="server">
<table>
<tr>
<td>Autocomplete Server Source, Server Filter (List): </td>
<td>
<asp:TextBox
ID="txtAutocompleteServerList"
runat="server"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>
Web Service
namespace jQuery
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 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();
}
}
}
For a
full example covering all possible scenarios in using a jQuery UI Autocomplete
control refer to the post Asp.net
jQuery UI Autocomplete Tutorial
Related Posts
No comments:
Post a Comment