/    Sign up×
Community /Pin to ProfileBookmark

is this possible using javascript?

Copy linkTweet thisAlerts:
Nov 11.2006

Hi, i have a question about html select object that, maybe, javascript can resolve. When using a select object you can select one item by pressing the inital character of the value when the object has the focus, ie by pressing ‘c’ the select will scroll to the first value of the list that starts with ‘c’. My question is: is there any way to scroll the select not just to the first value but the entire characters pressed? ie when i press ‘abc’ the select should go to the ‘abc’ value not just to the ‘a’, then ‘b’ and then ‘c’ values.
Thanks

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoNov 11.2006 — You can use a text box to allow the user to type into it and change the value of the select object. Here is how to do it with the select option text (the text that displays for each option, which can be different than the value of the option):

<html>
<head>
<script type="text/javascript">
function changeVal(val)
{
var ops = document.getElementById('myselect').options;
var i, opval;

for(i=0;i<ops.length;i++)
{
opval = ops[i].firstChild.data.substring(0,val.length);
if(opval==val)
{
ops[i].selected=true;
return true;
}
}
return false;
}
</script>
</head>
<body>
<form>
<input type="text" onkeyup="changeVal(this.value)">
<select id="myselect">
<option value="0">A
<option value="1">AB
<option value="2">ABC
<option value="3">ABCD
</select>
</form>
</body>
</html>

And here is how to do it with the select option value:

<html>
<head>
<script type="text/javascript">
function changeVal(val)
{
var ops = document.getElementById('myselect').options;
var i, opval;

for(i=0;i<ops.length;i++)
{
opval = ops[i].value.substring(0,val.length);
if(opval==val)
{
ops[i].selected=true;
return true;
}
}
return false;
}
</script>
</head>
<body>
<form>
<input type="text" onkeyup="changeVal(this.value)">
<select id="myselect">
<option value="A">0
<option value="AB">1
<option value="ABC">2
<option value="ABCD">3
</select>
</form>
</body>
</html>
Copy linkTweet thisAlerts:
@Pete_G_authorNov 12.2006 — hey, thx for even take the time for writing the code. this is a workaround that can help me.
×

Success!

Help @Pete_G_ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...