In this post Asp.Net jQuery
UI Autocomplete with Asp.net Web Service - Server data with Client side filter we shall see on how populate a jQuery Autocomplete control
using server side data exposed by an Asp.net web service.
In this
example, the data will be initially loaded by calling the Asp.Net web service,
however subsequent filters will be done at the client 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.
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, 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);
}
}
});
});
</script>
</script>
</head>
<body>
<form id=" frmAutocomplete" runat="server">
<table>
<tr>
<td>Autocomplete Server Source, Client Filter: </td>
<td>
<asp:TextBox
ID="txtAutocompleteServer"
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 string GetCountries()
{
return
"Belgium, Belize, Bermuda, Bolivia, Botswana, Brazil,
Burundi, Burkina";
Burundi, Burkina";
}
}
}
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