> Anybody know of a script that replicates type-ahead select lists (like
> in Gmail or offline VB applications)?
George,
I built this using _javascript_. It's not too pretty, but it works just fine.
The idea is that a global variable is the "buffer" in the list, to which
keystrokes are added. The script is set to work on my page, but I am sure
you can figure out how to adapt it.
HTH,
Matthieu
*****
NOTES
*****
1) pkTAX is the primary key in the table listing the options for the
drop-down.
2) TAX_Term is the text of that option.
**************************
SELECT TAG LOOKS LIKE THIS
**************************
<SELECT name="pkTAX" >
>
<OPTION value="-1" selected>Select a taxonomy term to add...</OPTION>
<CFLOOP query="qTerms">
<OPTION value="#qTerms.pkTAX#">#qTerms.TAX_Term#</OPTION>
</CFLOOP>
</SELECT>
*******************************
THESE GO IN THE <HEAD> SECTION.
*******************************
// Declare global variables used for typeahead feature.
var ta_pkTAX = "";
var sn_pkTAX = "";
// Handle keystrokes.
function typeAhead() {
// Check whether user has hit enter, requesting that the form be submitted.
if (event.keyCode == 13) {
// CASE: user wants to submit form.
runSubmitFunction();
} else {
// Set basic variables.
var keyPressed = String.fromCharCode(event.keyCode).toUpperCase();
var currentlySelected = document.frmDummy.pkTAX.options.selectedIndex;
var selectNew = document.frmDummy.pkTAX.options.length;
var i = 1;
// Add latest key pressed to global storage for this control.
ta_pkTAX = ta_pkTAX + keyPressed;
// alert(ta_pkTAX);
// alert(sn_pkTAX);
// Find closest match in list.
while (i < document.frmDummy.pkTAX.options.length) {
selectNew = i;
// Is the current entry the closest match?
if (document.frmDummy.pkTAX.options[i].text.substr(0,ta_pkTAX.length) >=
ta_pkTAX) {
// CASE: yes - end loop in place.
i = document.frmDummy.pkTAX.options.length;
} else {
// CASE: no - increment to next value
i++;
}
}
// Set value of select box.
document.frmDummy.pkTAX.options.selectedIndex = selectNew;
// Set stored typeahead value for select box.
sn_pkTAX = selectNew;
}
if (event.keyCode == 27) {
//handle escape key event
}
}
function adjustForTypeAhead() {
// Is there a stored typeahead selection value for the select box?
if (sn_pkTAX != "") {
// CASE: yes - set select box to that value
document.frmDummy.pkTAX.options.selectedIndex = sn_pkTAX;
sn_pkTAX = "";
} else {
// CASE: no - reset typeahead storage variable.
ta_pkTAX = "";
}
}
[Todays Threads]
[This Message]
[Subscription]
[Fast Unsubscribe]
[User Settings]
[Donations and Support]