Getting ready

1. Add a HTTP handler SearchKeys.ashx to the project.

2. Add the following namespaces to the code-behind:

using System.Collections.Generic; using System.Web.Script.Serialization;

3. The HTTP Handler implements iHttpHandler and contains two primary functions:

□ ProcessRequest that takes in a single HttpContext parameter

□ isResuable that returns a Boolean value

4. Define the lsReusable() function as follows:

public bool IsReusable { get {

return false;

5. Create a function that will return a list of matching search keywords from an internal collection based on the target keyword:

public static string[] GetFilteredList(string keyword) {

List<string> countryList = new List<string> { "Australia", "Indonesia", "Philippines", "New Zealand", "Singapore", "Thailand", "Korea", "Vietnam" };

List<string> filteredList = new List<string>();

foreach (string keyval in countryList) {

if (keyval.ToUpper().Contains(keyword.ToUpper())) filteredList.Add(keyval);

return filteredList.ToArray();

6. Assuming the target keyword is passed as a QueryString parameter to the handler, it can be retrieved using the following:

string keyword;

keyword = context.Request.QueryString["keyword"];

7. Thus, the ProcessRequest() function can be defined as follows:

public void ProcessRequest (HttpContext context) {

string keyword;

keyword = context.Request.QueryString["keyword"];

JavaScriptSerializer serializer = new JavaScriptSerializer();

string jsonString = serializer.Serialize(GetFilteredLi st(keyword));


Note that we have used a Serialisation function to format the output list in JSON. The response is sent back to the client using Context.Response.Write.

8. Next, we will add a new web form Recipe6.aspx to the project.

9. Download jQuery UI library from You can customise the download to include the following widgets:

□ Autocomplete

10. Save the downloaded script files in the local folder js. Save the style sheets in the local folder css.

11. Include the previous files on the page along with the jQuery library:

<link href="css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/jquery.ui.core.js" type="text/javascript"></ script>

<script src="js/jquery.ui.position.js" type="text/javascript"></ script>

<script src="j s/j query.ui.widget.j s" type="text/j avascript"></ script>

<script src="js/jquery.ui.autocomplete.js" type="text/ j avascript"></script>

12. Add a TextBox control to the form. Thus, the ASPX markup of the web form Is as follows:

<form id="forml" runat="server"> <div align="center"> <fieldset style="width:400px;height:lOOpx;"> <table cellpadding="3" cellspacing="3" border="0"> <tr><td>

<label id="lblCountry" runat="server">Select the required country: </label> </tdxtd>

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> < /tdx /tr > </table> </fieldset> </div> </form>

13. On page load, the web form will appear as shown:

Now, we will use jQuery to add auto complete functionality to the TextBox. We will retrieve the matching keywords by posting an AJAX request to the HTTP handler.

0 0

Post a comment