Suggest As You Type
(Page 1 of 4 )
In our ongoing quest to create the ultimate application, usability and familiarity are often given far too little thought. This article explains a very effective way of giving users a comfortable environment, by mimicking a popular piece of GUI functionality. I will show you how to create a tool that captures characters as you type, and tries to match them to items in a <select> menu. This is a great way to speed up the process of selecting a specific item within a large list, or just suggesting a similar item to what the user has typed.
Introduction
Our responsibilities as application developers are heavy and numerous. In fact, so numerous, that sometimes we may have the tendency to adhere to and fulfill our favorites, and leave the others floating in limbo. Our logical and rational minds think of many wonderful ways to solve life's computing problems, but fail to consider how the end user feels about our solution. We believe our application is perfect, it meets all technical requirements and then some. But why is adoption rate so low? One word: usability.
Already you're wondering what the previous paragraph has to do with the subject of this article. Let me expand a little further. Usability is key to users enjoying and adopting our applications. And as far as usability goes, people in general have become accustomed to a few standard pieces of functionality in the world of user interfaces. This article will deal with one of those pieces in particular, the ability to find items as you type.
Think of any program that displays a long list of unique items: a file browser, an e-mail application, Active Directory, etc. Within any of these programs, you have the option of typing in a few letters, and the program takes those letters and suggests the specific item you may be looking for. If you wanted to find my name in an address book, you could type in 'jus', and you could expect to be led straight to me. It's a wonderfully handy shortcut, something most of us couldn't do without.
But now consider your web-based application. Commonly, we employ <select> menus to hold long lists of items. But what happens if you want to find one specific item, like my name again? Type in 'jus', and first the list will jump to the first 'j' item, then to the 'u' item if any exist, and then to the 's' items. It's really quite frustrating, as you're now forced to scroll through the list with your mouse as well, and manually find your item. And 'manually' is precisely the thing we're trying to eliminate by designing and building software!
Wouldn't it be great if we could develop some way of imitating that 'suggest as you type' sort of functionality, and make the user's life so much easier? (the answer is yes by the way) Well, as you're already expecting by having read the title of this article, I'm going to show you how to do exactly that! No more leaving usability in limbo!
Next: The Plan >>
More JavaScript Articles
More By Justin Cook
/ 17 
