Will "the Mighty" Strohl

Using the Autocomplete jQuery Plugin

In my day job at RezHub.com, we began using jQuery last December, and there has been no turning back.  Our site is a DotNetNuke website, and out main module is the one that facilitates the travel searches, such as the one on the RezHub home page.  It was originally built by Arrow Designs, and has since been maintained by us.  It functions almost exclusively using jQuery and various jQuery plugins, including the Autocomplete plugin.

RezHub.com Home Page Screen Shot

The Autocomplete plugin allows the end-user to begin typing a value for a textbox, and the textbox will suggest values that are acceptable to be entered.  In our case, we are suggesting travel destinations.  This allows for developers to have a real possibility to increase usability on their web forms.

Travel Search Autocomplete Example

While the example I am giving you is actually more complicated than the code I will be showing you, the functionality and end-result remain the same.  It is quite simple to wire up a textbox to take advantage of Autocomplete, but there is a little work that you might need to do first.  Make sure that you have the Autocomplete plugin script (and jQuery) included in your page or module. 

The first step to making this work is to add the references to your page.  I have blogged about this in various forms in several earlier posts, so I will not rehash it here.  Besides, I have another post planned this week that will rehash it again anyhow. ;)

Let’s See it Work

After adding the jQuery references to your page, this would be a really simple example of using Autocomplete using the following code:

<input id="txtCity" type="text" />
<script language="javascript" type="text/javascript">
   1:  
   2:     jQuery(document).ready(function(){
   3:         var data = 'Orlando Jacksonville Pensacola Tallahassee Tampa Clearwater Naples Sarasota Miami'.split(' ');
   4:         var options = { lookUp: data }
   5:         jQuery('input#txtCity').autocomplete(options);
   6:     });
</script>

Here is what that might look like:

City Name: (Enter in the first few letters of a city name.)

Hint!  Choose one of these cities:  Orlando Jacksonville Pensacola Tallahassee Tampa Clearwater Naples Sarasota Miami

That seems easy enough, right?  Give it a go! 

Using a Web Service

The next step is to attach this to a web service to make it use dynamic data.  Assuming that the web service only returns a single string to the Autocomplete, here is how you’d do that:

// imaginary web service returning a list of String
var urlService = 'http://www.domain.com/services/service.svc';
var options = { serviceUrl: urlService }
jQuery('input#txtCity').autocomplete(options);

That’s not all that difficult, right?  The second half of the call allows you to call and set optional settings, such as minChars to designate how many characters to wait for before the autocomplete task begins.  I will be blogging in greater detail about the web service implementation later.

Hopefully, that’s enough to get your interest piqued enough to try this on your own. 



blog comments powered by Disqus