Using the Autocomplete jQuery Plugin
Nov
18
Written by:
11/18/2009
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.
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.
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.
10 comment(s) so far...
Re: Using the Autocomplete jQuery Plugin
Hi
Amazing example of auto complete. I understand very clearly. Also see this site for jquery some example www.phpjquery.com
By parthiban on
11/18/2009
|
Re: Using the Autocomplete jQuery Plugin
Great post. Useful tool, and easy to implement..
Is there a way to have it start with a known list if nothing is selected onClick into the input?
Sometimes there's no clear way to know what to start typing for the lookup list. (ex: rolenames in a portal).
Sort of a dropdown meets auto-complete concept.
Thanks again Will!
By Brad Schafer on
12/17/2009
|
Re: Using the Autocomplete jQuery Plugin
Absolutely! You'd just need to capture the event in the way that you find most usable. (onclick, onblur, etc.) Then, check the input. If the input is nothing, then load a full list. I'd suggest alternative solutions if you have a lot of results though.
By Will on
12/17/2009
|
Re: Using the Autocomplete jQuery Plugin
Thanks for the hint to these useful tool, but just how do you include the Autocomplete plugin script and jQuery? I tried it on different ways, but it didn't work. Maybe there is some conflict because of the $ Sign.
your's
Felix
By Felix Helix on
1/7/2010
|
Re: Using the Autocomplete jQuery Plugin
@Felix - If you're using DNN 5.x, then you do not need to worry about "including" jQuery. The only exception is if you upgraded from DNN 4.x to 5.x. In that case, you'll have to enable widgets to get jQuery working.
You can otherwise include scripts in any number of ways. If you're building a module, then you'd use your normal ways to programmatically include any jQuery plugin. However, if you're not programming, then you might want to consider using my Injection Module, or the PageBlaster Module.
By Will on
1/7/2010
|
Re: Using the Autocomplete jQuery Plugin
Thanks for your response Will.
I use DNN 5.x and included the plugin via
If Not DotNetNuke.UI.Utilities.ClientAPI.IsClientScriptBlockRegistered(Page, "jquery.autocomplete.js") Then
DotNetNuke.UI.Utilities.ClientAPI.RegisterStartUpScript(Page, "jquery.autocomplete.js", "")
End If
With firebug I can see that the script is loaded.
And I get no error message (only a warning that the charcode property of a keyUp event shouldn't be used).
But it just won't do anything.
Any ideas?
your's
felix
By Felix Helix on
1/8/2010
|
Re: Using the Autocomplete jQuery Plugin
Unfortunately, that's not enough information for me to help you. I would suggest starting over with the rest of the implementation since you have confirmed the script is loading. This way, you will be able to see if you missed something much easier.
By Will on
1/8/2010
|
Re: Using the Autocomplete jQuery Plugin
And by the way, it seems there is an error in the test code:
4:var options = { lookUp: data }
should be
4:var options = { lookup: data }
no uppercase in "lookup", took me forever to get back to javascript debugging ;-)
By Nico on
5/27/2010
|
Re: Using the Autocomplete jQuery Plugin
@Niko: Nice catch! Sorry for the confusion. :)
By Will on
5/27/2010
|
Re: Using the Autocomplete jQuery Plugin
@Jason: Your HTML comments aren't coming through in the blog comments. Can you repost using psuedo-HTML so it shows in your comment?
By Will on
8/6/2011
|