dropdown filter

**McKirahan** · Jul 23 '05, 02:58 PM

Re: dropdown filter

"Hermes" <nospam@nospam. com> wrote in message
news:cljpps$pa0 $1@sparta.btint ernet.com...[color=blue]
> Hi All,
>
> I've tried searching for this answer but have had no joy.
> Is there anyway with javascript to allow the end user to click in a[/color]
dropdown[color=blue]
> box and when they type the first few letters it brings up the next match
> rather than the first bunch of words with the last letter.
> e.g.
>
> Dropdown box :
> BIRMINGHAM
> BRIGHTON
> BRISTOL
> GLASGOW
>
> when the user types brig brighton is displayed instead of glasgow.
>
> Thanks in advance,
> Hermes
>[/color]

Try this; watch for word-wrap.

<html>
<head>
<title>typefast .htm</title>
</head>
<body>
<script type="text/javascript">
// Cooking with JavaScript & DHTML
// Bonus Recipe: Typing select Element Choices in IE for Windows
// http://www.oreillynet.com/pub/a/java...nygoodman.html
// http://www.oreillynet.com/lpt/a/4135

// global storage object for type-ahead info, including reset() method
var typeAheadInfo = {last:0, accumString:"", delay:2000, timeout:null,
reset:function( ) {this.last=0; this.accumStrin g=""}};

// function invoked by select element's onkeydown event handler
function typeAhead() {
// limit processing to IE event model supporter; don't trap Ctrl+keys
if (window.event && !window.event.c trlKey) {
// timer for current event
var now = new Date();
// process for an empty accumString or an event within [delay] ms of
last
if (typeAheadInfo. accumString == "" || now - typeAheadInfo.l ast <
typeAheadInfo.d elay) {
// make shortcut event object reference
var evt = window.event;
// get reference to the select element
var selectElem = evt.srcElement;
// get typed character ASCII value
var charCode = evt.keyCode;
// get the actual character, converted to uppercase
var newChar = String.fromChar Code(charCode). toUpperCase();
// append new character to accumString storage
typeAheadInfo.a ccumString += newChar;
// grab all select element option objects as an array
var selectOptions = selectElem.opti ons;
// prepare local variables for use inside loop
var txt, nearest;
// look through all options for a match starting with accumString
for (var i = 0; i < selectOptions.l ength; i++) {
// convert each item's text to uppercase to facilitate
comparison
// (use value property if you want match to be for hidden
option value)
txt = selectOptions[i].text.toUpperCa se();
// record nearest lowest index, if applicable
nearest = (typeAheadInfo. accumString > txt.substr(0,
typeAheadInfo.a ccumString.leng th)) ? i : nearest;
// process if accumString is at start of option text
if (txt.indexOf(ty peAheadInfo.acc umString) == 0) {
// stop any previous timeout timer
clearTimeout(ty peAheadInfo.tim eout);
// store current event's time in object
typeAheadInfo.l ast = now;
// reset typeAhead properties in [delay] ms unless cleared
beforehand
typeAheadInfo.t imeout =
setTimeout("typ eAheadInfo.rese t()", typeAheadInfo.d elay);
// visibly select the matching item
selectElem.sele ctedIndex = i;
// prevent default event actions and propagation
evt.cancelBubbl e = true;
evt.returnValue = false;
// exit function
return false;
}
}
// if a next lowest match exists, select it
if (nearest != null) {
selectElem.sele ctedIndex = nearest;
}
} else {
// not a desired event, so clear timeout
clearTimeout(ty peAheadInfo.tim eout);
}
// reset global object
typeAheadInfo.r eset();
}
return true;
}
</script>
<form>
<select name="City" onkeydown="type Ahead()">
<option>
<option>BIRMING HAM
<option>BRIGHTO N
<option>BRIST OL
<option>GLASG OW
</select>
</form>
</body>
</html>

dropdown filter

dropdown filter

Comment