Home arrow JavaScript arrow Page 3 - 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 Suggestion Function
(Page 3 of 4 )

Ok, now that we have that clear in our minds, let's see how to do the actual suggestion function.

<script language="javascript">
function suggestName
if ( isNaNlevel ) ) { level 

This is just some simple error checking. This prevents run-time errors in case the function somehow gets called in an incorrect fashion (with a parameter other than an integer). Also, you'll notice that when we call it from the text box, we're not supplying any parameter at all, so 'level' gets initialized to 1. As we'll see in a second, the 'level' just helps us call the function recursively until we've matched all of the letters possible.

 var document.form1;
var listbox f.employeeList;
var textbox f.employeeName;

These are more or less the only three variables that we need to modify to just pop this script into any page we have and use it. The names are fairly self-explanatory, so I'll move on.

 var soFar textbox.value.toString();
var soFarLeft soFar.substring(0,level).toLowerCase();
var matched false;
var suggestion '';

What happened here, is that we're taking what's been typed into the text box, and taking a chunk of it to the length of 'level'. This means that if you paste a six letter word into the text box, the function will first start by only matching the first letter, then the second, and so on. This is important, because it means that you'll always see the closest match, even if there is no exact match for the letters you've typed. Now let's get into the search mechanism.

 for ( var 0listbox.lengthm++ ) {
if ( soFarLeft == suggestion ) {
.options[m].selected true;

So what this chunk of code does, is iterate through the list, grabbing the portion of each item, left-trimming it to the size of 'level'. If it's matched, we set that item to be selected, trip the boolean 'matched' flag, and break out of the loop. If no match is found after going through the entire list, the function exits, and we're left with the last selected item, the one closest to what we've typed. If a match is found however, we run through the function again, this time incrementing the level first, to see if we can perhaps find an ever closer match. We can do that like this:

 if ( matched && level soFar.length ) { level++; suggestName(level) }

And that's it, that's the wonderful 'suggest as you type' function that I use over and over in my forms.

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