JQuery_ Novice to Ninja - Earle Castledine [119]
A big long list is a bit intimidating, so we’ll use some basic CSS to make the list into a grid, and convert each tag into a small box. With our grid ready to go, we have to add the jQuery UI library to the page. Now it’s time to tell the tag list to become selectable:
chapter_08/01_jquery_ui_selectable/script.js (excerpt)
$("#tags").selectable();
Fire up your browser and check it out. Hrrm … has anything actually happened? Well yes, it has, but it’s invisible! The selectable method works by adding class attributes to selected items, unless we assign styles to those classes, we’ll be unable to see anything happening. If you inspect the list items with Firebug as you select them, you’ll see the changes occurring. Let’s have a stab at styling selected elements:
chapter_08/01_jquery_ui_selectable/style.css (excerpt)
#tags .ui-selecting {
background: #FEFF9F;
}
#tags .ui-selected {
background-color:#eEeF8F;
}
The ui-selecting class is applied as the user is in the process of selecting elements, and the ui-selected class is added as soon they stop. If you try it now, you’ll see you can lasso some squares. It’s quite a natural interaction—which is exactly what you want from your page components. You can also click while holding down the Ctrl key to select individual items.
The next task we want to do is help with the duplicate tags. In a tagging system the number of tags for each term is important—so rather than just deleting duplicates, we’ll write some code to select any tags that match the user’s selection. For instance, if they click on “A-lister,” all the “A-lister” tags will be highlighted.
We need to know which events we can hook into from the jQuery UI component. Consulting the documentation, we find that we can capture the start, stop, selecting, unselecting, selected, and unselected events. We could capture the selecting event—and remove duplicates as the user moves the mouse—but it might be a bit confusing. We’ll stick with the stop event, which fires as soon as the user completes the selection:
chapter_08/01_jquery_ui_selectable/script.js (excerpt)
$('#tags').selectable({
stop: function() {
// The user stopped selecting!
}
});
Now we can begin our quest to find the duplicate tags. Our general approach will be to make a list of all the tags the user has selected, then search for any duplicates of those tags that appear in the greater tag list:
chapter_08/01_jquery_ui_selectable/script.js (excerpt)
var names = $.map($('.ui-selected, this'), function(element, i) {
return $(element).text();
});
$('li', this)
.filter(function() {
if ($.inArray($(this).text(), names) != -1) {
return true;
} else {
return false;
};
})
.addClass('ui-selected');
To find the duplicates, we’ve called on the service of an assortment of new jQuery features, so hold on to your hats!
The first of these is the oddest: $('.ui-selected', this). This looks like a regular jQuery selector, but there’s a second parameter. It turns out that the complete definition for the jQuery selector is actually $(expression, context)—we’ve just been omitting the second parameter. The context defines where jQuery should look for your selector; by default it looks everywhere on the page—but by specifying our unordered list as the context, the expression will be limited to elements inside the list.
$.map and $.inArray
Next we use a couple of jQuery utility methods: $.map and $.inArray to juggle the list items. The utility methods jQuery provides are mostly for working on JavaScript arrays—and that’s what we’re doing here. First we create an array called names, which we populate using the $.map method.
The $.map method allows you to take each element in the array, process it in some way, and return the results as a new array. You use it when you want to transform every element in the same way. We want to transform our jQuery selection into a simple list of tag text—so we pass in the selection, and define an anonymous function to return each element’s text. Hey