Now that we’re using Backbone JS as our Javascript framework, we find that having widgets that talk Backbone simplifies our code. Last week I took the time to write an autocomplete widget which uses a Backbone collection of models to feed it. I wrote it as a jQuery plugin and the self-documented code is here. You can give it a spin; here is a demo.

Type in a State or Province

To use it, simply call jQuery.autocomplete on an INPUT element. When the INPUT takes focus and the user starts typing, the widget runs over items in the collection and shows matches highlighting in bold the found character sequence. The drop-down list is simply a UL placed at absolute position. You can use the arrow keys to cycle through matches and press TAB or ENTER to select it. Of course, you can click with the mouse to select a match as well.
Here is the code for the above example. The Javscript demo file is here and the CSS here.

$(document).ready(function() {
	var collection = new Backbone.Collection([
		{id:"AB", name:"Alberta"},
		{id:"BC", name:"British Columbia"},
		{id:"MB", name:"Manitoba"},
		// ...
		{id:"AP", name:"Armed Forces Pacific"}
	]);

	$('#states_provinces').autocomplete({
		collection: collection,
		attr: 'name',
		noCase: true,
		ul_class: 'autocomplete shadow',
		ul_css: {'z-index':1234}
	});
});

If you’re a Backbone JS developer, feel free to use it and enhance it. One thing it currently lacks is the ability for users to scroll the content of the drop-down list (it is hidden upon INPUT blur – so clicking on the scrollbar hides it). But for short lists which don’t need to be scrolled, it works great.

Martin

This entry was posted on Monday, April 4th, 2011 at 8:21 am and is filed under Updates. You can follow any responses to this entry through the RSS 2.0 feed. You can trackback from your own site.