Find Item in list box by typing

kramerica · Dec 16, 2003

I have a listbox.

When I type in the first letter the listbox responds by taking me to that section of data. For example: If I have a list of states, and I type in 'M' it navigates down to the states that start with the letter 'M'. If I want to just type in "MA" when I hit 'A' it navigates back up to the states that start with the letter 'A'. I want it to navigate to 'MA - and so forth so that I can apply this to other code. ANY ideas? or better yet working samples.

Please note: My list box is not a listbox of States, it is a list of software. (and it constantly changes) I want to be able to type 'visio' and navigate down to the first app in the listbox that starts with 'visio'.

Kramer

YNOTU · Dec 16, 2003

could be wrong but don't think is possible. I remember a post a looooong time ago about this topic. If I find it I'll post it.

^{The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of the darkness. For he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee....}

onpnt · Dec 16, 2003

DeCojute's right

the first letter/number is as far as it's gonna go in basic form.
ASP is deffinetely not going to give you anything, but if you really wanted to bog down the users actions to may be able to catch what they type onKeyDown or other key events and make some global var's off it while looping the listbox's contents and focusing (or selecting) the value parsed to the closes match.

That will make a gittery event for the user though and I dont think with a lengthy amount of data piled into the listbox it will be effective in coming accross to them

_____________________________________________________________________

_{Hakuna matata!!}

mwa · Dec 16, 2003

I found something from Microsoft one time that can do this. I can't seem to find the link but here is the code:

select.htm

Code:

<HTML>
<HEAD>
<TITLE>Smart Select</TITLE>
<STYLE>
SELECT {behavior:url(Select.htc)}
</STYLE>
</HEAD>

<BODY>

<SELECT NAME=&quot;select1&quot; STYLE=&quot;HEIGHT: 22px; WIDTH: 159px&quot; id=select1 LANGUAGE=javascript>
<OPTION SELECTED>One</OPTION>
<OPTION>Two</OPTION>
<OPTION>Three</OPTION>
<OPTION>Four</OPTION>
<OPTION>Five</OPTION>
<OPTION>Six</OPTION>
<OPTION>Seven</OPTION>
<OPTION>Eight</OPTION>
<OPTION>Nine</OPTION>
<OPTION>Ten</OPTION>
<OPTION>Eleven</OPTION>
<OPTION>Twelve</OPTION>
<OPTION>Thirteen</OPTION>
<OPTION>Fourteen</OPTION>
<OPTION>Fifteen</OPTION>
</SELECT>

<SCRIPT FOR=window EVENT=onload LANGUAGE=&quot;JavaScript&quot;>
select1.focus();
</SCRIPT>
</BODY>
</HTML>

select.htc

Code:

<PUBLIC:COMPONENT>
<PUBLIC:PROPERTY NAME=&quot;timeout&quot; />
<PUBLIC:PROPERTY NAME=&quot;showStatus&quot; />
<PUBLIC:ATTACH EVENT=&quot;onkeypress&quot; ONEVENT=&quot;return KeyPress();&quot;  />
<PUBLIC:ATTACH EVENT=&quot;onkeydown&quot; ONEVENT=&quot;return KeyDown();&quot; />
<PUBLIC:ATTACH EVENT=&quot;onfocus&quot; ONEVENT=&quot;return OnFocus();&quot; />
<PUBLIC:ATTACH EVENT=&quot;onblur&quot; ONEVENT=&quot;return OnBlur();&quot; />
<PUBLIC:ATTACH EVENT=&quot;onpropertychange&quot; ONEVENT=&quot;return PropertyChange();&quot; />
<PUBLIC:EVENT NAME=&quot;onchange&quot; ID=&quot;mychange&quot;  DISPID=&quot;-2147412082&quot; />
<SCRIPT LANGUAGE=&quot;JScript&quot;>
// Select.htc -- Add Incremental Search to a <SELECT> 
// 
// Last Updated: 4/28/00 by Burt Harris
//
var time;					// Time of last keystroke
var searchString;			// Incremental search accumulator
var inControl, lastIndex;	// Workaround for TAB when list down

function OnFocus()
{
	if (timeout == null)	
		timeout = 3000;		// Set default timeout if not supplied
	if (showStatus == null)
		showStatus = true;	// Set default for showStatus
	else
		showStatus = eval(showStatus);
	time = new Date();		// Initalize timer
	searchString = &quot;&quot;;		// Start at the first character
	inControl = false;		// Start out not in search mode

	// SOMEDAY: drop down list on receiving focus
}

function KeyDown()
{
	// Keys we don't understand, like Up, Down etc 
	// mark us as not in incremental search mode
	if (event.keyCode != 9)		// Tab dosn't effect mode
		inControl = false;		
	return true;			
}

function KeyPress()
{
	var i, lasttime = time;	// Save old time
	time = new Date();		// Note new time
	inControl = true;		// We are in incremental search mode
	if (!lasttime)		
		lasttime = time;	// Only happens when debugging
	var delta = time.valueOf() - lasttime.valueOf();
	if (delta > timeout)
		searchString = &quot;&quot;;	// Reset search if too much time
	// Add the character to the search string
	searchString = searchString + String.fromCharCode(event.keyCode);
	if (searchString.length == 1)
		SearchFor( searchString, 1);	// Normal 1-character search
	else if (!SearchFor( searchString, 0 )) // Incremental search
		{ // Incremental search failed, try 1-character search
		searchString = String.fromCharCode(event.keyCode);
		SearchFor( searchString, 1 ); 
		}
	event.returnValue = false;	// Avoid default handling
}

function OnBlur()
{
	// If we were &quot;in Control&quot; and loose focus, make sure
	// the item we last selected is still selected.
	if (inControl && lastIndex != this.selectedIndex)
		this.selectedIndex = lastIndex;
}

function PropertyChange()
{
	// This function generates the onchange events that were 
	// otherwise lost by our defining it as a custom event.
	if (event.propertyName == &quot;selectedIndex&quot;)
		mychange.fire(createEventObject());
}

function SearchFor( string, offset )
{
	var l = string.length;			// Length of search string
	var o = this.selectedIndex;		// Original position in list
	var i = o + offset;				// Current position in list
	if (i >= this.options.length)
		i = 0;						// Wrap around if needed
	if (showStatus)					// Show status information
		window.status = &quot;Search: &quot; + string;
	string = string.toLowerCase();	// For case insensitive search
	do
	{
		// Check if the current item matches
		if (string == this.options[i].innerText.substr(0,l).toLowerCase())
			return SelectItem(i);		// Success
		if (++i >= this.options.length)	// Try next position
			i = 0;						// Wrap around if needed
	}	while (i != o);					// Keep trying until all tested
	return false;					// No match found
}

function SelectItem(index)
{
	if (index >= 0 && index < this.options.length)
	{
		lastIndex = index;
		this.selectedIndex = index;
	}
	return true;
}

</SCRIPT>  
</PUBLIC:COMPONENT>

This seems to work pretty good but is a little slow when you get numerous records in the box (100+)... Hope that helps...

mwa
<><

mwa · Dec 16, 2003

Ummm... I just realized you said listbox, not dropdown box... Oh Well... Maybe this can be adapted to a listbox...

mwa
<><

onpnt · Dec 16, 2003

aren't listbox and dropdown box the same thing though [wink]

I think you may be thinking combo box

_____________________________________________________________________

_{Hakuna matata!!}

mwa · Dec 16, 2003

Your right... I should quit while I'm ahead...

mwa
<><

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Find Item in list box by typing

kramerica

Technical User

YNOTU

Technical User

onpnt

Programmer

mwa

Programmer

mwa

Programmer

onpnt

Programmer

mwa

Programmer

Similar threads

Part and Inventory Search

Sponsor