Home arrow JavaScript arrow Page 4 - 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 - The End
(Page 4 of 4 )

I have found this little tool to be incredibly handy. For obvious reasons, it saves time when trying to find an item in a list. It also adds to the usability of our application, providing a familiar environment for users. (Not to mention that people are generally pretty impressed by this idea.)

There is another extremely useful purpose for which I've used this tool. I once built a knowledge-base which allowed users to upload and manage documents into certain categories, and administrators could create new categories. To prevent the creation of a bunch of categories with similar but slightly different names, I threw this script into the category creation panel. As administrators would start to type in the name they wanted, the tool would basically say “hey, this category already exists, would you like to just re-use the name?” This prevented having a whole bunch of redundant records in the 'names' table of the database.

I know that menus with a couple hundred records can easily be handled by this script, but once you get into really large menus, you might want to consider modifying the script to make it more efficient. I would perhaps have a global variable that remembers the last thing you typed in, and starts searching the menu items from where you last were, not all the way from the beginning each time. But anyhow, the point of this tutorial is to plant this idea in your mind, and let you modify it to suit whatever need you may come up with. Happy coding!

In case you want all the code, un-broken, here it is:

<script language="javascript">
function suggestName
level ) {
if ( isNaNlevel ) ) { level 
var document.form1;
var listbox f.employeeList;
var textbox f.employeeName;
var soFar textbox.value.toString();
var soFarLeft soFar.substring(0,level).toLowerCase();
var matched false;
var suggestion '';
for ( var 0listbox.lengthm++ ) {
if ( soFarLeft == suggestion ) {
.options[m].selected true;
if ( matched && level soFar.length ) { level++; suggestName(level) }

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials