Choose an item from Drop down list, by typing a value 3

susan17 · Nov 7, 2001

Hi,

Is there any drop-down listbox, where:
- in addition to selecting the item from the drop-down list,
- the user can also directly type in an item, without having have to choose it from the drop down listbox (just for information:the item that is typed by the user is in the dropdown list)

Something similar to Visual Basic drop-down list

And this needs to be done using pure HTML only.

Looking forward for your reply.

Thx.

Boomerang · Nov 7, 2001

Hi Susan,

In pure HTML this is what you can do:
If you use only pure HTML you allways have to get the focus on the dropdownbox with your mouse. After that you can type the first letter of the word (i.e. the "a&quot

. If you have more words starting with a, you can repeat typing this letter.

<form id=form1 name=form1>
<SELECT NAME="Selectboxname" size="1">
<option value=""><-- Select an Item --></option>
<option value="1">aWord</option>
<option value="2">anotherWord</option>
<option value="3">a third a-word</option>
<option value="4">myWord</option>
<option value="5">just another Word</option>
<option value="6">is this what you want?</option>
<option value="7">just a word</option>
</SELECT>
</form>

If you want to have the focus immediately you can do that with coding this after the form:

<script language="javascript">
document.form1.Selectboxname.focus();
</script>

Or, if you don't want this script in the middle of your HTML, put this onload-attribute in the body.

<body onload="javascript:document.form1.Selectboxname.focus();">

Hope this helps,
Erik

susan17 · Nov 7, 2001

Hi, Erik.. thanks for your prompt reply.. I really appreciate it..

However, what I meant is that the user should be able to write the whole item name.

The background of my question is that:
the items in the list will be of this format: aaaaa123, or aaaaa345, or aaaaa456. The number of items will be a lot.

Currently, the user will be able to type a letter 'a', which will find the first item that starts with the letter 'a', and then alternate to other items that start with the 'a' letter. However, since the items will start with 5 'a's, therefore, this will not be very helpful for the user.

Therefore, I need the user to be able to type in the whole item name (e.g. 'aaaaa123') directly to the drop-down list, without having have to choose it from the list.

Anybody can help?

Thanks.

ToddWW · Nov 7, 2001

Susan,

Here you go.

Code:

<html> <body> <script Language="JavaScript"> function findItem(form_obj) { for (var i = 0; i < form_obj.myList.length; i++) { if (form_obj.myList.options[i].text.indexOf(form_obj.searchList.value) == 0) { form_obj.myList.options[i].selected = true return } } // form_obj.myList.options[0].selected = true } </script> <form> <input type="text" name="searchList" onKeyUp="void findItem(this.form);"> <select name="myList"> <option>aaa1</option> <option>aaa2</option> <option>aaa3</option> <option>aaa4</option> <option>aaa5</option> <option>bbb1</option> <option>bbb2</option> <option>bbb3</option> </select> </form> </body> </html>

Go ahead and just load this page and run it. You'll see that it should do what you want.

I've commented out a single line in that JavaScript function. If you uncomment that line, than the list will return to the first option if the text typed in the field ever gets to a point where it does not match anything. If you leave the line commented out, then the list will always remain at it's last selection, or movement. For example, if the visitor types in aaa3 the list will move to that option as soon as they press the 3 key. If the press a z key after that, then the list will either move back to the top or just stay where it is. Depending on if you leave that line commented out.

Here's something a little tricky, if you're posting your form, follow these rules.

Give that text box a unique name. In other words, don't name it search or anything like that. Name it something very unique.

Make sure you clear that text box before you submit the form. If you don't follow these two rules, then when visitors start typing in that text box, IE's autofill function (if enabled) will drop down a list below the text field which could get pretty confusing in this particular situation if you know what I mean. So as long as you give it a very unique name, something that's not duplicated on any other website AND you clear the value of the box before you submit, you should be in good shape.

Beware, hitting the enter key in this text box will try to submit the form. You can disable that by placing this in your form tag.

Code:

<form ... onSubmit="return false">

Then, if you actually need to submit the form, you'll need to do that with a button type element instead of a submit type element. Like this.

Code:

<input type="button" value="Submit" onClick="this.form.submit();">

Let me know if you need any more help integrating this into your page.

ToddWW

KevinFSI · Nov 7, 2001

ToddWW,
I'm really impressed. I did the same thing a few months ago, but used regular expressions to physically compare the text box to the select box. Where where you then? I like your method much better.

I also ended up making mine auto complete the text box with the matched text from the select box. In other words, if I were looking for the word Todd, I would type the letter "T" and the "odd" would jump into the text box, but the "odd" would be "selected," so you could continue typing if "odd" wasn't the match you were looking for. Basically, it mirrors the behavior of the browser address bar when you type in a link you've already visited. The letters you type are unselected, whereas the auto complete portion is selected.

I would have had a much easier time getting started if I had your piece of code to begin with though. Kevin
slanek@ssd.fsi.com

ToddWW · Nov 7, 2001

Glad to be of help. Let me know if you need any further assistance.

ToddWW

susan17 · Nov 7, 2001

Dear ToddWW,

Wo

http://www..

your solution is really great, and I really thank you for your prompt reply...

However, I really need this to be done in pure HTML...
I don't have the priviledge of using javascript at all..

Anybody can help?

Thanks.

ToddWW · Nov 7, 2001

Well, that's unfortunate and only God himself will be able to help you with that one !! So either start praying really, really hard for what would be a miracle, or re-think the JavaScript thing.

Netscape and Microsoft have given us all the privelege of honoring that language. Browsers are shipped with JavaScript enabled so the only reason that solution I provided wouldn't work is if someone actually turned JavaScript off in their browser. And if they did that today, they'd be kicked out of about 80% of all the websites on the net.

At any rate, I'm not sure why you can't use it, maybe it's for a school project or something like that. But if someone has asked you to come up with a pure HTML solution for what you want to achieve, they're asking you to do the impossible. It's going to take some form of client side scripting to get the results you need. Of course, you can do it with client side VBScript, but that won't be honored by Netscape, so you'd be working in the opposite direction there.

Sorry to hear about your situation. :-(

ToddWW

KevinFSI · Nov 8, 2001

No kidding. Bummer! Kevin
slanek@ssd.fsi.com

baad · Nov 9, 2001

yea, i like it too!! pure & simple !!! :] Victor

joepeacock · Dec 5, 2001

Hi!

I have a similar script to ToddWW's and have a bit of a problem with it. Here's mine:

Code:

function chooselist() { txtlength = document.forma.textfind.value.length; for (i=document.forma.productID.options.length-1; i>=0; i--) { if (document.forma.productID.options[i].text.substring(0,txtlength).toLowerCase() == document.forma.textfind.value.toLowerCase()) { document.forma.productID.selectedIndex = i; } } } <FORM method="post" name="forma"> <select name="selectionID" size="9"> <option>ABC <option>DEF <option>GHI (<options ad nauseum>) </SELECT> <input type="text" name="textfind" size="20" onKeyUp="chooselist()"> </form>

Same basic idea. My problem, however, is that I am using a selection box with a size parameter, and if the option that becomes selected is below the visible options in the select box, Netscape won't scroll down to show it automatically. It becomes selected just fine, but you don't know that unless you scroll down. IE of course srolls down the selection box automatically, but Netscape does not.

Is there a way to force the scroll, either to the selected option automatically, or to a specific option index?

Thanks!

julie79 · Dec 7, 2001

ToddWW & KevinFSI,
Have tried you select script. It works great matching up what the user has entered - however nothing ever actually gets selected. KevinFSI can you post how you got the user input field to autocomplete.

Thanks
Julie

KevinFSI · Dec 7, 2001

Yeah, mine selects the entry and auto completes the form. I think Todd was just putting something up there to give susan a basic idea.

It's a lot of code to paste here. I'd be happy to e-mail it to you, or anyone else. My e-mail is at the bottom of this post. Send me a message and I'll reply with the code. If you really rather not, just say so and I'll post it instead. Kevin
slanek@ssd.fsi.com

Boomerang · Dec 7, 2001

He Kevin,

Maybe you can combine your code and toddWW's to a perfect piece of code. Then you put this code in a FAQ and put the FAQ-thread in a post here.

advantages are:

1) If members do later a keyword search they can also visit your FAQ if they want.
2) If you want to update your FAQ-code later , everyone has the latest version of that moment. (there will be no old code in this post)

For example: 2 weeks ago I send myself an emial-notification-thread of this post, because I want to study this item in the future.

A good idea? or not?

Erik

KevinFSI · Dec 7, 2001

Perhaps. I just never have enough spare time. If I do, I'll put something together. Kevin
slanek@ssd.fsi.com

Pierluigi · Jan 21, 2002

Hi,
what if I had only a select tag?
Tnx a lot in advance.
Cheers

KevinFSI · Jan 21, 2002

With no options? Kevin
slanek@ssd.fsi.com

"Life is what happens to you while you're busy making other plans."
- John Lennon

Pierluigi · Jan 22, 2002

Of course with options... but with no input tag...
Tnx a lot

Pierluigi · Jan 22, 2002

I found the solution by myself. I hope this could help for anyone having the same problem.
Cheers

<html>
<body>
<script Language="JavaScript">

var concatenatedLetters=""

function findItem(objSelect) {

for (var i = 0; i < objSelect.length; i++) {
if (objSelect.options.text.toLowerCase().indexOf(concatenatedLetters) == 0) {
objSelect.options.selected = true;
return;
}
}
//objSelect.options[0].selected = true; // va sul primo in caso non si trovi il corrispondente

concatenatedLetters = concatenatedLetters.substring(0,concatenatedLetters.length - 1)
}

function trovaMatch(e, objSelect) {

var codeASCII = e.keyCode;

if (codeASCII == 27) { //delete all on ESC
concatenatedLetters = "";
findItem(objSelect);
return;
}
var letter = String.fromCharCode(codeASCII);
letter = letter.toLowerCase();

concatenatedLetters += letter;

findItem(objSelect);
}

</script>
<form>

<input type=text name=text1>

<select name="myList" onKeyPress="trovaMatch(event,this); return false;" onFocus="concatenatedLetters=''" onBlur="concatenatedLetters=''">
<option value="01">seleziona</option>
<option value="02">Italia</option>
<option value="03">Irlanda</option>
<option value="04">Francia</option>
<option value="05">Germania</option>
<option value="06">graceland</option>
<option value="07">girino</option>
</select>

<input type=text name=text2>
</form>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Choose an item from Drop down list, by typing a value 3

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

IS-IT--Management

IS-IT--Management

Similar threads

Log in

Part and Inventory Search

Sponsor