JQuery_ Novice to Ninja - Earle Castledine [102]
We’ll use the Autocomplete plugin from the jQuery plugin repository. It’s a full-featured and stable plugin that provides exactly the functionality we need, with minimum weight.
Figure 7.3. Autocompleting “last known whereabouts” field
Firstly, we need the plugin. Head over to the repository and grab it, have a quick look at the examples, then include it your page.
We’ll also need to set some CSS styles. There’s an example CSS file included with the plugin, so you can gain some idea of the classes that are added. We’ve used several of these styles to give our drop-down suggestion list a standard appearance.
The Autocomplete plugin attaches itself to a select box. We’re applying it to the location field in our simple form:
chapter_07/10_autocomplete/index.html (excerpt)
Now let’s see what the Autocomplete plugin can do for us. By default, it requires a local collection of data stored in an array; this is perfect for us, as we want to source our data from an HTML list on the page:
chapter_07/10_autocomplete/script.js (excerpt)
var cities = ['New York', 'Melbourne', 'Montreal', 'London' … ];
$('#location').autocomplete(cities,{
autoFill: true,
selectFirst: true,
width: '240px'
});
We’ve simply passed in a JavaScript array, but Autocomplete also allows us to pass in a URL, in which case it will retrieve the list of potential values via Ajax. Autocomplete will expect a plain-text return comprising one value per line, which should be easy to obtain after a quick chat with your back-end developers!
The above code is enough to get it up and running, but we can also specify a bunch of options. autoFill gives us a nice type-ahead effect (filling out the text box with the currently suggested completion), matchContains will cause it to match substrings of words, rather than just the first letters, and so on. There’s a lot you can fine-tune, so it’s worth having a quick study of the options list.
The Autocomplete plugin also fires the result event when the user chooses an option. It will give us the name of the tag that was selected as the second parameter passed to our event handler (after the event object). For example, this would alert the selected option when it’s selected:
$('#location')
.autocomplete(cities)
.result(function(event, selection) {
alert(selection);
});
Very simple, but very funky. And the client is still playing with the last toy we built for him! Perhaps we’re a bit too good at playing with form elements, and better return to the to-do list!
Star Rating Control
Building a large celebrity-stalking community is our client’s primary goal; he’s starting to realize that the users of his site are becoming his product—a product he can start to sell to advertisers. Keen to explore this possibility, he wants to increase user engagement, and help his users feel important. He has to look after his product, after all. We’ve thought about this a bit, and tossed him a star rating idea—after all, people love nothing more than to express their feelings through the assignment of gold stars. Our control will appear as shown in Figure 7.4.
Figure 7.4. Star rating control
The basis for our star rating control is a radio button group; it’s perfect, as the browser enforces a single selection from the group. You can select the range that you want the user to choose from, simply by adding the correct number of buttons:
chapter_07/11_star_ratings/index.html (excerpt)