ASP & jQuery UI: autocomplete with json source (part: 1)

Tweet

I've been struggling with the idea of implementing a form with autocomplete features quite a lot. I just wanted to use jQuery and jQuery UI with an asp page which will output a JSON file to be used for the autocomplete list. As you may know jQuery UI has an autocomplete widget, so we do not really need to reinvent the wheel.

I must admit that I don't know much about JSON and so I had to understand it first. In addition, the jQuery UI documentation is not really helpful because it mainly focus on the jQuery part of code (which is quite obvious). Anyway I managed to make it work at very basic level. This post and the one that will be published after it, will explain how to do it.

First of all, let me make a list of things we have to consider:
1) we need to use jQuery and jQuery UI;
2) we will create an asp page with the input box which will have an autocomplete feature;
3) we then need to create another asp page that will output items for the autocomplete input box. The output will be in JSON format.

In the following article we will deal with point 1 and 2. The next post will explain point 3.

Ready? Go!


Autocomplete.asp
We need to create a new asp page and give it the name "autocomplete.asp"
The first thing we have to do is to include jQuery and jQuery UI to the file. In our example we will connect to ajax.googleapis, make things easier. Include the following lines of code in the head of your newly created page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"/>

With the first line we include the jQuery library. The second line includes jQuery UI. And the third includes the jQuery UI css file (basic theme).

In the head of our autocomplete.asp page, we then add the autocomplete function:

<script type="text/javascript" language="javascript">
<!--
    $(function() {
        $( "#username" ).autocomplete({
            source: "source.asp",
            minLength: 2
    });
    });
// -->
</script>

As you can see, we are using the autocomplete feature in a very basic way (without setting any particular option). We are referring to an input box with id = "username", the source of the autocomplete function will be a file called "source.asp", and the minimum length of the searched value is set to 2 ("the minimum number of characters a user has to type before the autocomplete activates").

Last part! We need to insert the code for the input box in the body of our page:

<input type="text" id="username">

Not much to say here, don't you agree?

Very straight forward, isn't it? In the next article we will see the creation of the "source.asp" file - which is actually the most intriguing part.