> 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]

Reply via email to