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 ( isNaN( level ) ) { level = 1 }
var f = 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 m = 0; m < listbox.length; m++ ) {
suggestion = listbox.options[m].text.toString();
suggestion = suggestion.substring(0,level).toLowerCase();
if ( soFarLeft == suggestion ) {
listbox.options[m].selected = true;
matched = true;
break;
}
}
if ( matched && level < soFar.length ) { level++; suggestName(level) }
}
</script>
| 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. |
/ 17 
