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

Well, I guess before we jump into JavaScript code, I should explain quickly what we'll do, and how we'll do it. Basically, we'll have a long list of items within a <select> menu. Now, it would get unnecessarily complicated to catch our keystrokes within a menu. So what we'll do is add an input box to capture our keystrokes, and match the list items to what we type, as we type it.

OK, so let's take quick inventory of what is needed. First, the <select> menu, full of all the choices. Now this menu can be either static or dynamically populated, because this whole operation is taking place on the client's browser.  We also need an input box to type in. We need the JavaScript function that handles the typed input matching. Also, I will throw in some optional in line scripting, to populate the text box with the text of a selected item. All right, we have our plan, so let's get to it.

The Code

First let's start off with our form elements, the input box and the select menu.

<form name="form1">
<input type="text" name="employeeName" onKeyUp="suggestName();" /><br />
<select name="employeeList" size="6"   
"SELECT employee_name FROM employees ORDER BY employee_name"
set objRs 
while not objRs
.write("<option value=""" objRs(0) & """>")
.write(objRs(0) & "</option>" vbcrLf)

In case any of the above code is unfamiliar to you, I'll explain it for you. First of all we have our input box, and the property is set such that every time a key is released within the box, we go off the suggestName() function, to see if we can match what's now in the box.

For the select menu, the in-line scripting simply states that each time you click on an item, we're going to send the text value of the selected item to the text box. This serves one purpose here, to show that we have chosen an item. The real usefulness of doing this though, is in the case where you're not depending on the actual text of the item (employee name in this case), but really on a unique identifier, such as employee number. We don't really need to see the employee number, but we can modify the select menu to hold the UID as the value of each item, and fill in a hidden field with that id when an item is clicked (selected). This really comes into play when you're trying to ensure referential integrity in a database, maybe using the employee number as a primary key.

If that's similar to the situation you have, you can just modify the SQL statement to pull the fields you need, and append some nearly identical in-line scripting. What you will do however, is send the 'value' instead of the 'text' of the selected item, probably to a hidden field.

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