digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

Showcase “Local Tag”

Autocompleted tags in input fields and textareas, controlled by keyboard and mouse.

The Action Happens Here

JavaScript & MooTools

document.addEvent('domready', function() {
 
	// Test source, list of tags from http://del.icio.us/tag/
	var tokens = ['.net', '2008', '3d', 'advertising', 'ajax', 'appengine', 'apple', 'architecture', 'art', 'article', 'articles', 'audio', 'blog', 'blogging', 'blogs', 'books', 'business', 'china', 'community', 'computer', 'cooking', 'cool', 'css', 'culture', 'design', 'development', 'diy', 'download', 'education', 'english', 'environment', 'fashion', 'fic', 'film', 'finance', 'firefox', 'flash', 'flex', 'flickr', 'fonts', 'food', 'free', 'freeware', 'fun', 'funny', 'gallery', 'games', 'generator', 'git', 'google', 'government', 'graphics', 'green', 'hardware', 'health', 'history', 'home', 'howto', 'humor', 'illustration', 'imported', 'inspiration', 'interactive', 'internet', 'java', 'javascript', 'job', 'jobs', 'language', 'law', 'library', 'linux', 'mac', 'maps', 'marketing', 'math', 'media', 'microsoft', 'mobile', 'money', 'mp3', 'music', 'news', 'online', 'opensource', 'osx', 'photo', 'photography', 'photos', 'photoshop', 'php', 'politics', 'portfolio', 'productivity', 'programming', 'python', 'rails', 'recipe', 'recipes', 'reference', 'research', 'resources', 'ruby', 'school', 'science', 'search', 'security', 'seo', 'sga', 'shopping', 'slash', 'social', 'software', 'statistics', 'teaching', 'tech', 'technology', 'tips', 'todo', 'tools', 'toread', 'travel', 'tutorial', 'tutorials', 'tv', 'twitter', 'typography', 'ubuntu', 'video', 'visualization', 'web', 'web2.0', 'webdesign', 'webdev', 'wiki', 'windows', 'wordpress', 'work', 'writing', 'youtube'];
 
	// Our instance for the element with id "demo-local"
	new Autocompleter.Local('demo-local', tokens, {
		'minLength': 1, // We need at least 1 character
		'selectMode': 'type-ahead', // Instant completion
		'multiple': true // Tag support, by default comma separated
	});
 
	// Our instance for the element with id "demo-local-2", the textarea
	new Autocompleter.Local('demo-local-2', tokens, {
		'minLength': 1, // We need at least 1 character
		'selectMode': 'type-ahead', // Instant completion
		'multiple': true // Tag support, by default comma separated
	});
 
});

XHTML Markup

<form action="http://del.icio.us/search/" method="get" id="form-demo">
	<fieldset>
 
		<legend><a href="http://del.icio.us/">del.icio.us</a> / search <small>(Suggestions from <a href="http://del.icio.us/tag/">top tags</a>)</small></legend>
		<label>
			<input type="text" name="p" id="demo-local" />
		</label>
 
		<label>
			<textarea name="p_long" id="demo-local-2" style="height: 100px;"></textarea>
		</label>
 
	</fieldset>
</form>

CSS Stylesheet

#demo-local
{
	width:				350px;
	border:				1px solid #444;
}

This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

261 Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!