combo box question.auto sense?

**pnj** · Mar 12th, 2001, 01:19 PM

how do I get my combo box(drop down thing) to automaticly go to the first word that starts with the letter that i type into it?

so say i have 300 words in alphabetical order and when I type "T" It jumps me to the 'T's ?

does that make sense?

thanks

**Danial** · Mar 12th, 2001, 06:28 PM

HI Pnj,
I am not sure if u need to program it at all. Coz its already been done. When you click on a drop down combo box and press say "c" key it will go to the first item starting with the letter c.

Try it with the VB world "Jump To" combo box at the bottom of this page !!!

**pnj** · Mar 12th, 2001, 07:09 PM

I don't think it is possible to do what i wanted.

if you press "c" the box jumps to the first item that starts with "c" but you can't type in anything else.

like if the word was "cat"
and you typed "c" then you typed "a" (the next letter in the word "cat") the combo box would jump to the first word that starts with "a".

oh well.....

**Mark Sreeves** · Mar 14th, 2001, 07:22 AM

Got it!
Here's my 'first cut'
it's got some debugging textboxes in there and it could do with altering so it handles tabs etc better...

Code:

<HTML>
<HEAD>
<script language="JavaScript"><!--
var regions = new Array("Aberdeen",
"Aberystwyth",
"Ayr",
"Bangor",
"Barnstaple",
"Barrow-in-Furness",
"Birmingham",
"Bolton",
"Boston",
"Bournemouth",
"Brighton",
"Bristol",
"Cambridge",
"Canterbury",
"Cardiff",
"Carlisle",
"Chelmsford",
"Chester",
"Coventry",
"Dudley",
"Dumfries",
"Dundee",
"Durham",
"Edinburgh",
"Exeter",
"Glasgow",
"Gloucester",
"Grimsby",
"Guildford",
"Hastings",
"Keith",
"Haverfordwest",
"Hereford",
"Huddersfield",
"Hull",
"Inverness",
"Ipswich",
"Kendal",
"Kirkwall",
"Leeds",
"Leicester",
"Lerwick",
"Lincoln",
"Liverpool",
"London-Central",
"London-NE",
"London-NW",
"London-SE",
"London-SW",
"Luton",
"Maidstone",
"Manchester",
"Middlesbrough",
"Newcastle-upon-Tyne",
"Newport-IOW",
"Northampton",
"Norwich",
"Nottingham",
"Oban",
"Oxford",
"Peterborough",
"Plymouth",
"Portsmouth",
"Preston",
"Prtsmouth",
"Reading",
"Salisbury",
"Selkirk",
"Sheffield",
"Shrewsbury",
"Stirling",
"Stoke-on-Trent",
"Stornoway",
"Stranraer",
"Swansea",
"Swindon",
"Taunton",
"Truro",
"Warrington",
"Wick",
"Worcester",
"York");

var str="";

function x() { 

var z=window.event.keyCode

if(z==8)
{	
	str = str.substring(0,str.length-1);

}else{
	str+=String.fromCharCode(z);
}

document.frm1.t1.value=str
findIt(str)
} 

function findIt(strIn)
{
var l = strIn.length
var s = ''

	for(j=0;j< regions.length;j++)
	{
		
		s=regions[j].substring(0,l).toUpperCase()
		document.frm1.t2.value = s
		if(s == strIn)
		{
			
			document.frm1.t2.value = regions[j]
			document.frm1.s1.selectedIndex = j;
			return 0
		}
	}

}
//--></script>


<TITLE></TITLE>
</HEAD>
<BODY>
<form name=frm1>
<select name=s1 onKeyUp="x()">

<script language=javascript>
for( j=0;j< regions.length;j++)
{
document.write("<option value=" + j + ">" + regions[j]+ "</option>")

}
</script>


</select>

<input name=t1></input>
<input name=t2></input>
</body>
</html>

**pnj** · Mar 14th, 2001, 08:04 AM

I'll give this a try. one thing is, I am going to have around 5000 records in the select area.
it is coming out of a DB but that shouldnt' matter eh?

thanks a bunch Mark

**Mark Sreeves** · Mar 14th, 2001, 08:07 AM

5000 sounds rather a lot.

try it and see!

**Mark Sreeves** · Mar 15th, 2001, 07:38 AM

a couple of ideas:

Instead of loading 5000 items into a <SELECT> you could have a 2 dimentional array with the inital letter allocted to each array and then load the SELECT from the selected array.

This would be pretty neat!

have a binary search to speed things up

Are you still going with this idea?
do you want me to code a working example of a 2d array version?

**Mark Sreeves** · Mar 15th, 2001, 09:03 AM

here's take 2:
uses a 2d array but still uses a linear search

looks a LOT cleaner when in use

Code:

 
<HTML>
<HEAD>
<script language="JavaScript"><!--
var regions = new Array();
var str="";
var curArray=0;
var lastIndex=0;

regions[0]= new Array("Aberdeen","Aberystwyth","Ayr");
regions[1]= new Array("Bangor","Barnstaple","Barrow-in-Furness","Birmingham","Bolton","Boston","Bournemouth","Brighton","Bristol");
regions[2]= new Array("Cambridge","Canterbury","Cardiff","Carlisle","Chelmsford","Chester","Coventry");
regions[3]= new Array("Dudley","Dumfries","Dundee","Durham");
regions[4]= new Array("Edinburgh","Exeter");
regions[5]= new Array("FFFFFFF");
regions[6]= new Array("Glasgow","Gloucester","Grimsby","Guildford");
regions[7]= new Array("Hastings","Haverfordwest","Hereford","Huddersfield","Hull");
regions[8]= new Array("Inverness","Ipswich");
regions[9]= new Array("JJJJJJ");
regions[10]= new Array("Keith","Kendal","Kirkwall");
regions[11]= new Array("Leeds","Leicester","Lerwick","Lincoln","Liverpool","London-Central","London-NE","London-NW","London-SE","London-SW","Luton");
regions[12]= new Array("Maidstone","Manchester","Middlesbrough");
regions[13]= new Array("Newcastle-upon-Tyne","Newport-IOW","Northampton","Norwich","Nottingham");
regions[14]= new Array("Oban","Oxford");
regions[15]= new Array("Peterborough","Plymouth","Portsmouth","Preston");
regions[16]= new Array("QQQQQQ");
regions[17]= new Array("Reading");
regions[18]= new Array("Salisbury","Selkirk","Sheffield","Shrewsbury","Stirling","Stoke-on-Trent","Stornoway","Stranraer","Swansea","Swindon");
regions[19]= new Array("Taunton","Truro");
regions[20]= new Array("UUUUU");
regions[21]= new Array("VVVVV");
regions[22]= new Array("Warrington","Wick","Worcester");
regions[23]= new Array("XXXXX");
regions[24]= new Array("York");
regions[25]= new Array("ZZZZZ");

////////////////////////////////////////////////////////////////////////
function fillCombo(j)
{
	var k
	document.frm1.s1.options.length = 0; // removes all options.
	curArray=j;
	for (k=0;k<regions[j].length;k++) 
	{
	   
	    document.frm1.s1.options.length = (k);
	    document.frm1.s1.options[document.frm1.s1.options.length] = new Option(regions[j][k]);
	}
	 document.frm1.s1.selectedIndex=0
}

////////////////////////////////////////////////////////////////////////

function x() { 
	var z=window.event.keyCode
	var ch = String.fromCharCode(z);
	var valid="123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"     

	if(z==8)//backspace
	{	
		str = str.substring(0,str.length-1);

	}else{
		if (valid.indexOf(ch)> 0) 
		{
	        str+=ch   
	    }
		
	}

	document.frm1.t1.value=str

	switch(str.length){
	case 0:
		fillCombo(0)
		break;
	case 1:
		fillCombo(str.charCodeAt(0)-65)
		break;
	default:

		findIt(str)
	}
} 
////////////////////////////////////////////////////////////////////////


function findIt(strIn)
{
var l = strIn.length
var s = ''

var newIndex
var found=false;	
	for(j=0;j< regions[curArray].length;j++)
	{
		
		s=regions[curArray][j].substring(0,l).toUpperCase()
		document.frm1.t2.value = s
		if(s == strIn)
		{
			document.frm1.t2.value = regions[curArray][j]
			newIndex = j;
			lastIndex = j
			found=true
			
		}
	}
	
	if(found==true)
	{
		document.frm1.s1.selectedIndex = newIndex
	}else{
		document.frm1.s1.selectedIndex = lastIndex
	}

}


//--></script>


<TITLE></TITLE>
</HEAD>
<BODY onLoad="fillCombo(0);">
<form name=frm1>
<select name=s1 onKeyUp="x()">

</select>

<input name=t1></input>
<input name=t2></input>
</body>
</html>

**pnj** · Mar 15th, 2001, 10:04 AM

this looks great!
i'm still trying to put in close to 5000 records so i may not go this route but I'm definitly
going to keep this code in my arsenal

thanks again

Thread: combo box question.auto sense?

Thread Tools

Display

Whoaa....

thanks

Posting Permissions