"A P" <ap@textguru.ph > wrote in message
news:%2******** ********@TK2MSF TNGP15.phx.gbl. ..
Hi!
I have seen some techniques like this on the web. Currently, I'm using
Combo
box which values came from database table. One disadvantage is when the
combo box have lots of values, users are complaining since you cannot use
keyboard to search the value that is needed. Hope you might help me.
regards,
Me
Use a <Select> tag as normal, but add a couple of event handlers in as
follows:
<select name="field1" onkeypress="lis tbox_onkeypress ();"
onblur="listbox _onblur();">
<option>1</option>
...
<option>n</option>
</select>
Then bang the following script in to a .js file and link it in... and hey
presto... you have autocomplete functionality.
// Auto-select listbox
// This script and the listbox on this page illustrates one
// way to create an "auto-complete" listbox, where the
var toFind = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
var oControl = ""; // Maintains a global reference to the
// control that the user is working with.
function listbox_onkeypr ess(){
// This function is called when the user presses a key while focus is in
// the listbox. It maintains the keyboard buffer.
// Each time the user presses a key, the timer is restarted.
// First, stop the previous timer; this function will restart it.
window.clearInt erval(timeoutID )
// Which control raised the event? We'll need to know which control to
// set the selection in.
oControl = window.event.sr cElement;
var keycode = window.event.ke yCode;
if(keycode >= 32 ){
// What character did the user type?
var c = String.fromChar Code(keycode);
c = c.toUpperCase() ;
// Convert it to uppercase so that comparisons don't fail
toFind += c ; // Add to the keyboard buffer
find(); // Search the listbox
timeoutID = window.setInter val("idle()", timeoutInterval );
// Restart the timer
}
}
function listbox_onblur( ){
// This function is called when the user leaves the listbox.
window.clearInt erval(timeoutID );
resetToFind();
}
function idle(){
// This function is called if the timeout expires. If this is the
// third (by default) time that the idle function has been called,
// it stops the timer and clears the keyboard buffer
timeoutCtr += 1
if(timeoutCtr > timeoutCtrLimit ){
resetToFind();
timeoutCtr = 0;
window.clearInt erval(timeoutID );
}
}
function resetToFind(){
toFind = ""
}
function find(){
// Walk through the select list looking for a match
var allOptions = document.all.it em(oControl.id) ;
for (i=0; i < allOptions.leng th; i++){
// Gets the next item from the listbox
nextOptionText = allOptions(i).t ext.toUpperCase ();
// By default, the values in the listbox and as entered by the
// user are strings. This causes a string comparison to be made,
// which is not correct for numbers (1 < 11 < 2).
// The following lines coerce numbers into an (internal) number
// format so that the subsequent comparison is done as a
// number (1 < 2 < 11).
if(!isNaN(nextO ptionText) && !isNaN(toFind) ){
nextOptionText *= 1; // coerce into number
toFind *= 1;
}
// Does the next item match exactly what the user typed?
if(toFind == nextOptionText) {
// OK, we can stop at this option. Set focus here
oControl.select edIndex = i;
window.event.re turnValue = false;
break;
}
// If the string does not match exactly, find which two entries
// it should be between.
if(i < allOptions.leng th-1){
// If we are not yet at the last listbox item, see if the
// search string comes between the current entry and the next
// one. If so, place the selection there.
lookAheadOption Text = allOptions(i+1) .text.toUpperCa se() ;
if( (toFind > nextOptionText) &&
(toFind < lookAheadOption Text) ){
oControl.select edIndex = i+1;
window.event.ca ncelBubble = true;
window.event.re turnValue = false;
break;
} // if
} // if
else{
// If we are at the end of the entries and the search string
// is still higher than the entries, select the last entry
if(toFind > nextOptionText) {
oControl.select edIndex = allOptions.leng th-1 // stick it
// at the end
window.event.ca ncelBubble = true;
window.event.re turnValue = false;
break;
} // if
} // else
} // for
} // function
Hope this helps...
Chris
