PDA

Click to See Complete Forum and Search --> : combo box question.auto sense?

pnj
Mar 12th, 2001, 12: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, 05: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, 06: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, 06: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...




<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, 07: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, 07:07 AM
5000 sounds rather a lot.

try it and see! ;)
Mark Sreeves
Mar 15th, 2001, 06: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, 08:03 AM
here's take 2:
uses a 2d array but still uses a linear search

looks a LOT cleaner when in use


<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, 09: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