jQuery with ASP.NET

In this post I want to show you how to integrate ASP.NET with jQuery UI Autocomplete widget. For those of you which don’t know what jQuery UI is here is a bit of introduction:

jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design.

From practitioner point of view – jQuery UI provides a few very nice and very useful widgets which you can really easily integrate with your application. Great example is Autocomplete widget which I will use in this post. I have found this widget very useful while implementing search functionality for my project. Of course to implement “just” search functionality where user can enter a keyword and click “search” button you don’t need much. And for sure you don’t need any fancy jQuery widgets. In my case additional requirement was to implement predictive search functionalty. That was a massive change for ASP.NET developer because out of the sudden I had to invoke search after each letter entered by a user and present it in a nice way.

Here is a great example how Google did the predictive search:

And here is another example, something like this I will show how to build in this post:

There is no component like that in Visual Studio! So the solution was to use jQuery UI Autocomplete widget.

How to integrate jQuery UI Autocomplete widget with ASP.NET

Step 1 – go to jqueryui.com and download jQuery UI. I was using version 1.8.14

Step 2 – include following JS scripts in your master page

<link href="/Styles/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/ui/jquery-ui-1.8.14.js" type="text/javascript"></scrpt>
<script src="/Scripts/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="/Scripts/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/Scripts/ui/jquery.ui.position.js" type="text/javascript"></script>
<script src="/Scripts/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>

On the list above are all jQuery, jQuery UI Autocomplete widget and dependencies. Please note that there is also CSS style on the list – this is required to make Autocomplete widget looks nice

Step 3 – Create a Web Service which will return predictive search results

[System.Web.Script.Services.ScriptService]
public class PredictiveSearch : System.Web.Services.WebService
{

    [WebMethod]
    public IList<string> GetAllPredictions(string keywordStartsWith)
    {
        //TODO: implement real search here!

        // dummy implementation
        IList<string> output = new List<string>();
        output.Add(keywordStartsWith + "1");
        output.Add(keywordStartsWith + "2");
        output.Add(keywordStartsWith + "3");
        output.Add(keywordStartsWith + "4");
        return output;
    }
}

This is an example of web service which returns dummy data. Your job is to take is further and integrate with your system. Good thing is that from this point it’s all .Net so something you should be comfortable with.

Step 4 – HTML Code

<div class="ui-widget">
    <asp:Label ID="lblSearch" Text="Search" AssociatedControlID="txbSearchKeyword" runat="server"></asp:Label>
    <asp:TextBox ID="txbSearchKeyword" runat="server" CssClass="searchinput"></asp:TextBox>
    <asp:Button Text="Go!" runat="server" onclick="Search_Click" />
</div>

<asp:Literal ID="litStatus" runat="server"></asp:Literal>

As you can see HTML code is fairly straightforward. Only standard ASP.NET controls are here. Textbox txbSearchKeyword is the place where users will be entering keywords. So this is also the place where we need to add jQuery Autocomplete functionality. And that will happen in next step …

Step 5 – jQuery code

Firstly, let me show you the simplest possible implementation. It’s very simple so also a bit limited
Limitation in this case is that search results are static (there are no ajax calls to server for search results). This can work well in scenario where set of all possible options is very limited – for instance you can use it to tag content. Assumption is that set of tags is fairly constant and in total there are below 100 tags in the system.

$(document).ready(function () {
    $(".searchinput").autocomplete({
        source: ["test", "asp.net", "jQuery"],
        minLength: 2
    });
});

And here is an example which actually uses Web Service from step 3.

$(document).ready(function () {
    $(".searchinput").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Services/PredictiveSearch.asmx/GetAllPredictions",
                data: "{'keywordStartsWith':'" + request.term + "'}",
                dataType: "json",
                async: true,
                success: function (data){
                    response(data.d);
                },
                error: function (result) {
                    alert("Due to unexpected errors we were unable to load data");
                }
            });
        },
        minLength: 2
    });
});

In both examples searching for predictions will start not straight away after entering 1 letter! It will start after entering 2 letters, parameter minLength is responsible for that. You can see that behind the scene autocomplete functions calls our PredictiveSearch.asmx Web Service, in particular method GetAllPredictions(). In the next line we are passing entered letters as a parameter data.

It’s recommended to have your JS function in a separate file so that HTML code is separated from JS code.

Step 6 – Get Keyword on server side

On this stage, everything should be working now on client side. You should be able to see something this:

The only missing thing is implementation of onClick function called by “Go!” button. Implementation is again dummy, just to show you how to access all the relevant data:

protected void Search_Click(object sender, EventArgs e)
{
    litStatus.Text = "Search conducted for keyword: " + txbSearchKeyword.Text;
}

And as far as I’m concerned this all what you need to integrate jQuery UI Autocomplete with ASP.NET. However here you will find more advanced tutorial showing how to customize jQuery UI Autocomplete widget.

Questions? If yes then leave a comment!

You can download the full ASP.NET project here with the jQuery UI Autocomplete integrated - it should help you with experimenting.