Thursday, May 26th, 2005

WICK: Web Input Completion Kit

Category: Examples, JavaScript, Library

This is WICK, the Web Input Completion Kit, an evolving framework that leverages web standards such as JavaScript, DOM and CSS to facilitate textual input in form UI elements assisted by local and remote data sources. This framework strives to remain unobtrusive and preserve a form’s semantics and accessibility.

The sample page shows text input boxes. If you start to type in there, you get a GMail/Yahoo Mail address lookup affect.

The author has a view:

I would describe this framework’s autocompletion implementation as “at least as good as GMail’s, not quite as pretty as Google Suggest’s but ought to be extended to get there, far better than Yahoo’s, pretty darn cross-browser compatible, mostly standards-compliant”. Most importantly, it has plenty of room for improvement and derivatives, which is part of my motivation for releasing it to the Open-Source Community under a BSD-style License. Which means you pretty-much can do whatever you want with it as long as you keep the copyright in place.

One key requirement I strive to meet is to allow an HTML document to load and be usable right-away while the library may take an extra few seconds to load without getting in the way of the user experience. Even if the script hasn’t loaded, an HTML form is to remain usable and accessible as it previously was. When the script is finally done loading, and the “collection” array populated, event handlers get registered, at which point an end-user starts seeing suggestions for what they’re in the middle of typing, if and only if the input field they’re typing in, has a class attribute with a special value.

Ajax support isn’t there yet.

Posted by Dion Almaer at 9:10 am

3.1 rating from 9 votes


Comments feed

Hiya :) thanks for checking it out! Yesterday I also added a few enhancement requests in the tracker database, just so i can start having some structure around a roadmap, i’d love to get input and/or comments from you and your readers. Here’s the

Comment by chris holland — May 26, 2005

I really like WICK.
Have a question though. How can you implement this with more than one collection on a page? For instance, I have a need to have one text box have drop-down style matching as the user types via one collection, and have a different text box with a different collection matching as the user types.

Thanks for any help.
Mark Holton

Comment by Mark Holton — January 17, 2006

Leave a comment

You must be logged in to post a comment.