Mar
22
JQuery Interface Autocomplete with .Net

Posted: 22nd March 2007
Tags: .Net, AJAX, dotnet, Javascript
Posted in .Net, Javascript
Comments: 1 Comment »

Warning: Invalid argument supplied for foreach() in D:\clockworkobjects.co.uk\wwwroot\wp-content\plugins\wp-syntax\geshi\geshi.php on line 2281

Warning: Invalid argument supplied for foreach() in D:\clockworkobjects.co.uk\wwwroot\wp-content\plugins\wp-syntax\geshi\geshi.php on line 2281

Warning: Invalid argument supplied for foreach() in D:\clockworkobjects.co.uk\wwwroot\wp-content\plugins\wp-syntax\geshi\geshi.php on line 2281

Warning: Invalid argument supplied for foreach() in D:\clockworkobjects.co.uk\wwwroot\wp-content\plugins\wp-syntax\geshi\geshi.php on line 2281

Warning: Invalid argument supplied for foreach() in D:\clockworkobjects.co.uk\wwwroot\wp-content\plugins\wp-syntax\geshi\geshi.php on line 2281

Warning: Invalid argument supplied for foreach() in D:\clockworkobjects.co.uk\wwwroot\wp-content\plugins\wp-syntax\geshi\geshi.php on line 2281

JQuery is an excellent easy to use Javascript Framework and has several excellent plugins, one of which is the Interface plug-in by Stefan Petre which provides lots of effects and features. One such feature is the autocomplete feature, which provides suggestions as the user types into a text box. Unfortunately the Interface plugin’s documentation does not cover how to implement the server side, which I will cover in this article.

Getting started with both the JQuery framwork and Interface plugin is really simple and requires linking to their respective Javascript files in the <head> and </head> tags of your html page. (I have copied the two files into a Javascript folder in my project directory) For example:

<script src="javascript/JQuery.js" type="text/javascript"></script>
<script src="javascript/interface.js" type="text/javascript"></script>

Once this is done we need to make sure that we can locate the particular textbox control on our page using a CSS Selector. To do this we need to assign it a CSS class using the CssClass property.

So, in the HTML view of our page we have the following ASPX textbox control:

<asp:textbox id="TextBox1" runat="server" cssclass="autocomp"></asp:textbox>

Once this is done we are ready to write some simple JQuery Javascript to setup our Autocomplete fuctionality.

Back in the Head section of our ASPX page we need to locate the two <Script> tags we added and under there add a new script code section as follows:

<script type="”text/javascript”">
$(document).ready(
 function() {
 $(’.autocomp’).Autocomplete({
 	source: ’/auto.aspx’,
 	delay: 500,
 	fx: {type: ‘slide’, duration: 400},
 	autofill: true,
 	helperClass: ‘autocompleter’,
 	selectClass: ‘selectAutocompleter’,
 	minchars: 2
 });
});
 
</script>

We use the $(document).ready method of the JQuery framework to provide a function to be run once the document object model is ready in the browser. Within the function we then use JQuery again to locate any objects in the document object model that have the class .autocomp. This should only be our aspx Textbox control, but if we had more than one they could each be a memeber of this css class and would then gain the autocomplete functionality. The .autocomplete() fuction is called on JQuery and we need to pass some parameters (these are all well documented on the Interface site) to work with. In the example above I am specifying that AJAX calls should be made to auo.aspx to retrieve the list of suggestions. (We’ll write this in a minute). We are setting a delay of 500ms before we start to make suggestions, the fx: property is specifying what animation effects to use. Autofil states to replace the text in the textbox with the selected text, the two class parameters specify css classes to use for our suggestion box (we’ll add these in a second) and finally the minChars states how many characters to have in the textbox before autocompletion starts.

We also need to add the css styles to our document, I will embed them in the head section, but these could be in an external CSS file as follows:

.autocompleter
{
border: 1px solid #6FBEFF;
width: 250px;
background-color: #EFF8FF;
}
 
.autocompleter ul li
{
padding: 2px 10px;
white-space: nowrap;
font-size: 11px;
}
 
.selectAutocompleter
{
background-color: #d2fb8f;
}

With this complete we can now write the backend server code to implement our Autcomplete. As we have specified in the autocomplete parameter to call /auto.aspx, we need to create auto.aspx in the root of our project. Once the new aspx file is created we need to go to HTML view and strip all content from our page, leaving only the page directive as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="auto.aspx.cs" Inherits="ScratchTest.auto" %>

Now we can write the code to return the required suggestions in our page_load method. The Interface documentation describes how the server response should be formatted, what it neglects to tell you is how we know what has already been entered in the textbox to make our suggestion. After a bit of research I discovered that in the Ajax request the following parameter is posted called ‘value’ which includes the current text in the text box. From this we can now make our suggestions.

I have previously created a table called suggestions in my database which has a column called suggestion which has my suggestions in. We can then use the SQL WHERE LIKE command to extract suggestions.

protected void Page_Load(object sender, EventArgs e)
{
	SqlConnection con = new SqlConnection("CONNECTION STRING");
	SqlCommand command = new SqlCommand("SELECT suggestion FROM suggestions WHERE suggestion LIKE ’" + Request.Form["value"] + "%’",con);
	con.Open();
	SqlDataReader reader;
	reader = command.ExecuteReader();
	StringBuilder feed = new StringBuilder();
	feed.Append("");
	feed.Append("<ajaxresponse>");
	while (reader.Read())
	{
		feed.Append("<item>");
		feed.Append("<text>" + reader["suggestion"] + "</text>");
		feed.Append("<value>" + reader["suggestion"] + "</value>");
		feed.Append("</item>");
	}
	feed.Append("</ajaxresponse>");
	con.Close();
	Response.Clear();
	Response.ClearHeaders();
	Response.ContentType = "text/xml";
	Response.Write(feed.ToString());
}

Here we make a request to the SQL database passing our WHERE LIKE filter to return only records that begin with the text we have entered into the textbox (which has been passed in the Reponse.form["value"] object. We then need to build the XML response that out autocomplete expects. We do this with a string builder, following the format documented on the Interface site.

As you can see this is an easy alternative to using the Autocomplete as part of the MS AJAX web control extensions.

Comments below..

Permalink | dzone | 1 Comment »

Comments

Note: You can leave a response, or trackback from your own site.

hari25
1/11/2007
2:50 pm

Comment:

hi, Your article is very simple easy and nice. I want to do an example based on ur article and append ur code into my project. But i am unable to get javascript files named as “javascript/jQuery.js & javascript/interface.js” files. Please send or tell where is it located? I hope, u will respond for my request… i am waiting for ur responce………… Thanking u sir, Regards hari krishna

Add a comment:

Mar22JQuery Interface Autocomplete with .Net

Comments

Mar
22
JQuery Interface Autocomplete with .Net