dikmus
Posts: 19
|
| Posted: 06/21/2005, 3:43 AM |
|
In my list box the user has to choose a product (from a of about 1000 items)
To select the desired item the user will type the first letter(s) of the product to get closer to the desired one. (browsing of the entire list will take to long).
This works for the first letter, but when typing the second letter the user will not get closer, but instead, the list box will shows all products starting with the second typed letter.
Is there a way to change the behaviour of the list box to a more intuitive behaviour?
_________________
www.musit.nl |
 |
 |
dataobjx
Posts: 181
|
| Posted: 06/21/2005, 8:14 AM |
|
Here's the code you need for 'Type-Ahead' Listboxes
Place this before the </head> tag:
<script name="DDL">
<!--
// Global Vars
var tString = '';
var lsf = 0; // last successful index
function evalKey() {
// Global Variables
var i = 0;
var success = false;
var elem = event.srcElement;
var tLowElemText = '';
// Get the unicode char of the keypress
var eCode = event.keyCode;
// Check if it's a vaid ASCII Character
if (eCode == 27){
tString = '';
elem.selectedIndex = 0;
}
else if ( (eCode > 31) && (eCode < 122))
{
// Convert the Code to the corresponding character and add to searchstring
tString += String.fromCharCode(eCode);
// ... and perform the search starting from the top element in the listbox
while (success == false)
{
i = 0;
// Convert everything to lowercase; allows an easy comparison
var tLowString = tString.toLowerCase();
// Compose the regexp searchstring ...
var rExpr = eval("/^" + tLowString + "/");
while ((i < elem.length)&& (success == false) )
{
tLowElemText = elem.options.text.toLowerCase();
// success: Position the listbox on the (first) found element
if (tLowElemText.search(rExpr) != -1)
{
elem.selectedIndex = i;
success = true;
}
else {
i++; }
} // while i < elem.length
// if nothing is found in the entire list, the last character of the searstring is
// removed to allow typing the correct 'next' character
if (success == false) {
tString = tString.substr(0, tString.length-1);
}
} // while success = false
}
// Just for demo use: updates the span displaying the typed
// characters; remove from code before re-using
lchr.innerText =String.fromCharCode(eCode);
tsf.innerText = tString;
window.event.returnValue = false;
window.event.cancelBubble = true;
}
// -->// --></script>
Place this line in the combo box tag:
onKeyPress="evalKey()"
e.g., <select name=dlTest onKeyPress="evalKey()">
_________________
www.DataObjx.net
www.mydigitalapps.com |
|
|
|
dik mus
|
| Posted: 06/21/2005, 11:22 AM |
|
That would be a great piece of code to put in ccs by default or after selecting this option!
Unfortunately i do not get it to work in vb.net. But this is probably because i can not get any code executed except for the vb code i put in the "onload" event. It seems vb.net is not the best language choise to create ccs applications.
By the way, am i supposed to remove this " <!-- " line ?
|
|
|
|
dataobjx
Posts: 181
|
| Posted: 06/21/2005, 12:08 PM |
|
Actually, I'm suprised that you were unable to get it going, as this is Client-Side JavaScript and this would not be affected by the fact that the Server-Side code is .NET.
Yes, leave the <!-- line intact
but modify the last line from
// -->// --></script>
to
// --></script>
Basically, the <!-- some code //--> hides the script from some of the older browsers.. so you can keep it intact.
If you know .asp, try the code there - where you're in familiar territory... then try it under your .NET project.
_________________
www.DataObjx.net
www.mydigitalapps.com |
|
|
|
|
