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.
First let's start off with our form elements, the input box and the select menu.
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.