Home arrow JavaScript arrow Suggest As You Type

Suggest As You Type

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.

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 24
April 19, 2004
  1. · Suggest As You Type
  2. · The Plan
  3. · The Suggestion Function
  4. · The End

print this article

Suggest As You Type
(Page 1 of 4 )


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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials