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
Printable View
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
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 !!!
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.....
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>
:)
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
5000 sounds rather a lot.
try it and see! ;)
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?
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>
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