Navigating qucikly to my text in Drop-Down - Classic ASP

[excel_hari]

Hi,

I couldnt locate a Classic ASP group hence posting here.

One of my colleagues has designed an intranet site and one of the pages
has a drop-down box with close to 300 options. I want to navigate to
the desired option quickly just by typing out the name. For example if
I want to choose "Other" (All the options are arranged alhabetically
within the Drop-down box) from Drop-down and if I Type "O" then I
navigate to first entry with letter "O" but if I follow it up quickly
with "T" then jump to entry with first letter as "T".

What technique to use so that one can type O, then T, then H and be
able to quickly navigate to Entry with first three letters as "OTH"

Please guide me.

Regards,
Hari
India

 

[Usenet Honey Pot]

(e-mail address removed) wrote in @o13g2000cwo.googlegroups.com:

Hi,

I couldnt locate a Classic ASP group hence posting here.

Did you even look? : )

Try microsoft.public.inetserver.asp.general

 

[tetitu]

i found that code a long time ago and add it an hebrew support
it is in javascript so it can be used in .net too

add the script in the head
<script language="JavaScript" src="includes/combo.js"></script>


////////////////// IE4+ ComboBox Script -- (C) 1999 by Ralph L. Brown
(akakEk) ////////////////////


var UNDEFINED; // do not assign!


function getX(obj)
{
return( obj.offsetParent==null ? obj.offsetLeft :
obj.offsetLeft+getX(obj.offsetParent) );
}

function getY(obj)
{
return( obj.offsetParent==null ? obj.offsetTop :
obj.offsetTop+getY(obj.offsetParent) );
}

function isvalidchar(achar,validstr)
{
return(
validstr.toUpperCase().indexOf(achar.toString().toUpperCase(),0) >= 0
);
}


function onSelectFocus( objSelect, flgInput )
{
if ( document.layers ) // NS4 (which doesn't work for SELECT objects
anyway)
{
//document.captureEvents( Event.KEYPRESS | Event.KEYDOWN |
Event.KEYUP );
//document.onkeydown = selectKeyDownHandler;
//document.onkeypress = selectKeyPressHandler;
//document.onkeyup = null;
}
else if ( document.all ) // IE4
{

if ( !document.all.divComboBubble ) // if this is the first time
this function is called
{ // then create the bubble text
window (<DIV>).
document.body.insertAdjacentHTML("beforeEnd",
"<DIV id='divComboBubble'
style='position:absolute;top:0px;left:0px;visibility:hidden'></div>");
}

// create/init data elements

objSelect.X = getX(objSelect)+2;
objSelect.Y = getY(objSelect)-20;
objSelect.strKeyInBuf = '';
objSelect.flgInput = false;

// if flgInput is 'INPUT' then this is an enterable list box.
if ( flgInput != UNDEFINED )
{
objSelect.flgInput = ( (''+flgInput).toUpperCase() == 'INPUT' );
}


// setup event handlers
objSelect.onmouseover = selectMouseOverHandler;
objSelect.onmouseout = selectMouseOutHandler;
objSelect.onblur = selectBlurHandler;
objSelect.onkeydown = selectKeyDownHandler;
objSelect.onkeypress = selectKeyPressHandler;
objSelect.onkeyup = null;


// display bubble help (title)
//objSelect.onmouseover(window.event); // this should work, but in
early versions of IE4 it doesn't!
selectMouseOverHandler(window.event);
}
}


function BubbleText(objSelect)
{
var s = divComboBubble.innerHTML = '';

if ( !objSelect ) // for the onBlur event to clear out the bubble
help
{
return(false);
}

with ( objSelect )
{
if ( strKeyInBuf.length > 0 )
{
if ( strKeyInBuf == title )
{
s = '<FONT color="blue">' + strKeyInBuf + '</font>';
}
else if ( ( selectedIndex >= 0 ) && ( strKeyInBuf ==
options[selectedIndex].text ) ) // unique match found
{
s = '<B>' + strKeyInBuf + '</b>';
}
else
{
var c =
strKeyInBuf.substring(strKeyInBuf.length-1,strKeyInBuf.length);
c = ( c == ' ' ) ? '&nbsp;' : '<B>' + c + '</b>';
s = strKeyInBuf.substring(0,strKeyInBuf.length-1) + c;
}

divComboBubble.innerHTML = '<TABLE cellpadding=0 cellspacing=0
style="background-color:INFOBACKGROUND;'
+ 'font:8pt ms sans serif;padding:2px 2px 2px
2px;color:INFOTEXT;border:1px solid INFOTEXT">'
+ '<TR><TD align=left><NOBR>'+s+'</nobr></td></tr></table>';
}

divComboBubble.style.posLeft = X;
divComboBubble.style.posTop = Y;
divComboBubble.style.visibility = '';
}

return(true);
}


function findSelectEntry( objSelect, head, tail ) // uses
divide-and-conquer search, assumes sorted list
{
with ( objSelect )
{
if ( options.length <= 0 )
{
strKeyInBuf = ' <FONT color="red">No selections available.</font>
';
BubbleText( objSelect );
window.status = strKeyInBuf = '';
return(-1);
}

if ( strKeyInBuf == '' )
{
strKeyInBuf = title;
BubbleText( objSelect );
window.status = strKeyInBuf = '';
selectedIndex=0; // set to top
return( selectedIndex = options[selectedIndex].text.length ? -1 :
0 );
}

var mid = Math.round( (head+tail)/2 );

if ( strKeyInBuf.toUpperCase() ==
options[mid].text.substring(0,strKeyInBuf.length).toUpperCase() )
{
while ( (mid>0) && strKeyInBuf.toUpperCase() ==
options[mid-1].text.substring(0,strKeyInBuf.length).toUpperCase() )
{
mid--; // get the topmost matching item in the list, not just
the first found
}

selectedIndex=mid;

window.status = strKeyInBuf =
options[mid].text.substring(0,strKeyInBuf.length);

if ( mid == Math.round( (head+tail)/2 ) ) // if the original mid
is an exact match
{
if ( (mid==tail) || ( (mid<tail) && strKeyInBuf.toUpperCase()
!= options[mid+1].text.substring(0,strKeyInBuf.length).toUpperCase() )
)
{
window.status = strKeyInBuf = options[mid].text; // unique
match found
}
}

BubbleText( objSelect );

return( selectedIndex );
}

if ( head >= tail ) // then since no exact match was found, go back
to previous strKeyInBuf (thus the length-1)
{
strKeyInBuf = strKeyInBuf.substring(0,strKeyInBuf.length-1)
return( findSelectEntry( objSelect, 0, options.length-1 ) );
}

if ( strKeyInBuf.toUpperCase() <
options[mid].text.substring(0,strKeyInBuf.length).toUpperCase() )
{
return( findSelectEntry( objSelect, head, Math.max(head,mid-1) )
);
}

return( findSelectEntry( objSelect, Math.min(mid+1,tail), tail ) );
}
}


function selectMouseOverHandler(e)
{
var event = e ? e : window.event; // to handle both NS4 and IE4
events

if ( event.srcElement.strKeyInBuf == '' )
{
event.srcElement.strKeyInBuf = event.srcElement.title;
BubbleText( event.srcElement );
event.srcElement.strKeyInBuf = '';
}
else
{
BubbleText( event.srcElement );
}

return(true);
}


function selectMouseOutHandler(e)
{
var event = e ? e : window.event; // to handle both NS4 and IE4
events

if ( event.srcElement != document.activeElement )
{
BubbleText( event.srcElement );
}

return(true);
}


function selectBlurHandler(e)
{
var event = e ? e : window.event; // to handle both NS4 and IE4
events

event.srcElement.strKeyInBuf = '';
window.status = (event.srcElement.selectedIndex>=0) ?
event.srcElement.options[event.srcElement.selectedIndex].text : '';
BubbleText( event.srcElement );

return(true);
}


function selectKeyDownHandler(e)
{
var event = e ? e : window.event; // to handle both NS4 and IE4
events

with ( event.srcElement )
{
// this is to correct the search bug when the list is left open
after single-click
if ( ( strKeyInBuf == '' ) && ( event.keyCode > 40 ) )
{
event.srcElement.blur();
event.srcElement.focus();
}

switch(event.keyCode)
{
case(8): // backspace
{
if ( ( selectedIndex >= 0 ) && ( strKeyInBuf ==
options[selectedIndex].text ) && !event.srcElement.flgInput )
{
window.status = strKeyInBuf = '';
}
else
{
window.status = strKeyInBuf =
strKeyInBuf.substring(0,strKeyInBuf.length-1);
}

BubbleText( event.srcElement );
event.keyCode = 0;
return(false);
}

case(9): // tab
case(13): // enter
{
event.keyCode = 9; // convert enter to tab
return(true);
}

case(27): // escape
{
window.status = strKeyInBuf = '';
BubbleText( event.srcElement );
event.keyCode = 0;
return(false);
}

case(32): // space
{
window.status = strKeyInBuf += ' ';
// this must be fired explicitely for spaces
return( event.srcElement.flgInput ? event.srcElement.flgInput :
selectKeyPressHandler(event) );
}

// I don't know if these are universal
case(33): // page up
case(34): // page down
case(35): // end
case(36): // home
case(38): // up arrow
case(40): // down arrow
{
window.status = strKeyInBuf = '';
BubbleText( event.srcElement );
return(true);
}

} // end switch
} // end with

return(true);
}


function selectKeyPressHandler(e)
{
var event = e ? e : window.event; // to handle both NS4 and IE4
events

if ( event.keyCode == 13 ) { event.srcElement.blur();
event.srcElement.focus(); }

if (
isvalidchar(String.fromCharCode(event.keyCode),"×בגדהוזחטיכלמנסעפצקרשתףךץן×ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
`~!@#$%^&*()_-+={}[]|:;'<>,./?\\\"" ) )
{
event.srcElement.strKeyInBuf +=
String.fromCharCode(event.keyCode);
}


if ( event.srcElement.flgInput ) // this is an enterable field
{
event.srcElement.options.length = 0;
event.srcElement.strKeyInBuf =
event.srcElement.strKeyInBuf.substring(0,31); // maxlength=32, should
be set elsewhere
event.srcElement.options[0] = new Option(
event.srcElement.strKeyInBuf, event.srcElement.strKeyInBuf );
event.srcElement.selectedIndex = 0;
}
else // search to find the matching value
{
// must use setTimeout to override the default SELECT keypress
event(s)
var strSel = 'document.' + event.srcElement.form.name + '.' +
event.srcElement.name;
setTimeout( 'findSelectEntry(' + strSel + ',0,' + strSel +
'.options.length-1);' , 1 );
}

return(true);
}


////////////////////////////////// -- End ComboBox.js --
////////////////////////////////////////

and the select option tag should look like this
<select name='article_magazine_id' onFocus='onSelectFocus(this)'
title='magazine' >
<option ...........................
....
....
</select>

 

[excel_hari]

Stan,

Try microsoft.public.inetserver.asp.general

I looked up the group posting statistics and it seemed to be a dead
group (with only 3/4 messages).

Regards,
Hari
India

 

[Hari]

Tetitu,

Thanks for the code.

Would get back in case my colleague has problems in implementing the
same.

Regards,
Har
India