/    Sign up×
Community /Pin to ProfileBookmark

hi

I took the following code from w3schools java scripts examples

this works fine

my problem is when the list is displayed there are 3 names that starts with letter m

when i will press m then the word with m should be high lighted
when i press m and then i then the word with Mi should be displayed
not the one with i

i want to do something like MS word..there is menu in the top which selects style of words like times new roman ,tahoma etc….

here in that when we press t, it displays the first word with letter t in menu..
then if we press ti, it goes directly to the times…..

is there any way i can do that…..

is anybody have any idea abt it

thanks bye

code:

<html>
<head>
<script type=”text/javascript”>
function go()
{
window.location=document.getElementById(“menu”).value
}
</script>
</head>

<body>
<form>
<select id=”menu” onchange=”go()”>
<option>–Select a page–</option>
<option value=”http://www.w3schools.com”>W3Schools</option>
<option value=”http://www.microsoft.com”>Microsoft</option>
<option value=”http://www.altavista.com”>macrosoft</option>
<option
value=”http://www.altavista.com”>mpcrosoft</option>
</select>
</form>
</body>

</html>

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@phpnoviceMar 25.2006 — This is a more complex question than it may seem to you. However, I wrote this code alomst six years ago to do that very thing. You'll have to experiment with it to make it work for you.
var fnd = "";
function findOption(sel, evt) {
if (window.event) var k = String.fromCharCode(event.keyCode);
else var k = String.fromCharCode(evt.which);
if (k &lt; " " || k &gt; "~") return true;
if (k == " ") fnd = "";
else fnd += k.toUpperCase();
for (var i=0; i&lt;sel.options.length; i++) {
if (fnd &lt;= sel.options[i].text.toUpperCase()) break;
}
sel.selectedIndex = i;
return false;
}

[code=html]
<select ...etc... onkeypress="return findOption(this)">
[/code]
Copy linkTweet thisAlerts:
@in1337ened1Mar 25.2006 — Maybe web dev should get a DHTML forum...
Copy linkTweet thisAlerts:
@charliechaplinauthorMar 29.2006 — HI thx for message

i tried ur way but i m not able to make it work..can u please explain it in little detail..which script to place where and how to...

that will be a gr8 help

thx

This is a more complex question than it may seem to you. However, I wrote this code alomst six years ago to do that very thing. You'll have to experiment with it to make it work for you.
var fnd = "";
function findOption(sel, evt) {
if (window.event) var k = String.fromCharCode(event.keyCode);
else var k = String.fromCharCode(evt.which);
if (k &lt; " " || k &gt; "~") return true;
if (k == " ") fnd = "";
else fnd += k.toUpperCase();
for (var i=0; i&lt;sel.options.length; i++) {
if (fnd &lt;= sel.options[i].text.toUpperCase()) break;
}
sel.selectedIndex = i;
return false;
}

[code=html]
<select ...etc... onkeypress="return findOption(this)">
[/code]
[/QUOTE]
Copy linkTweet thisAlerts:
@phpnoviceMar 29.2006 — The code should work as shown. The only other thing you really need to know is that the space bar resets the search to begin over again.
Copy linkTweet thisAlerts:
@charliechaplinauthorMar 30.2006 — i tried that but it is nt work...please be specific....

as i m new to it i dont know much... so help me ..

thanks anyways...
Copy linkTweet thisAlerts:
@phpnoviceMar 31.2006 — Oh, the thing I forgot is that that code is written expecting a list of options that are already in sorted sequence. For an unsorted list, you would need slightly different code. Sorry for that omission. ?

You can try this mockup to see that the code works as I have described. Just load this up in your browser and slowly type out the spelling for June -- and watch how the selection advances according to what you type. Then, press the spacebar to see the selection go back to the top.
[code=html]
<HTML>
<HEAD>
<title>Select Fun</title>
<script language="javascript">
var fnd = "";
function findOption(sel, evt) {
if (window.event) var k = String.fromCharCode(event.keyCode);
else var k = String.fromCharCode(evt.which);
if (k < " " || k > "~") return true;
if (k == " ") fnd = "";
else fnd += k.toUpperCase();
for (var i=0; i<sel.options.length; i++) {
if (fnd <= sel.options[i].text.toUpperCase()) break;
}
sel.selectedIndex = i;
return false;
}
</script>
</HEAD>

<BODY onload="document.forms[0].elements[0].focus()">
<form>
<select size="4" onkeypress="return findOption(this)">
<option>April</option>
<option>August</option>
<option>December</option>
<option>February</option>
<option>January</option>
<option>July</option>
<option>June</option>
<option>March</option>
<option>May</option>
<option>November</option>
<option>October</option>
<option>September</option>
</select>
</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@charliechaplinauthorMar 31.2006 — hi

thanks for the code..

i tried it it works....but i think there is some problem ...

when u put ur cursor on april field it works ok for june.... for any other it is not working properly..

i m trying to resolve it....

just take a look....

thanks anyways...

phani
Copy linkTweet thisAlerts:
@charliechaplinauthorMar 31.2006 — Sorry sorry i forgot to reset it i have to use space bar....


sorry..

thanks
×

Success!

Help @charliechaplin 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...