INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

form elements

How to create a combo box (autocomplete list box) - Cross browser compatible by BillyRayPreachersSon
Posted: 12 Mar 05 (Edited 3 May 06)

If you're looking for a cross-browser version of nmath's FAQ (FAQ216-4818), then this should work for you.

Tested working in IE6, FF1, NN7, and Opera7... and will probably work in most new browsers.

CODE

<html>
<head>
    <script type="text/javascript">
    <!--
        function fillin(formObj) {
            var mytext = formObj.elements['mytext'].value;
            sellength = formObj.elements['wholetext'].length;

            for(var i=0; i<sellength; i++) {
                if (formObj.elements['wholetext'].options[i].text.toLowerCase().indexOf(mytext.toLowerCase(),0) == 0) {
                    formObj.elements['wholetext'].options[i].selected = true;
                    break;
                }
            }
        }

        function filltext(selObj) {
            document.forms['myForm'].elements['mytext'].value = selObj.options[selObj.selectedIndex].text;
        }
    //-->
    </script>
</head>

<body>
    <form name="myForm">
        <input type="text" name="mytext" onkeyup="fillin(this.form);"><br />
        <select name="wholetext" onchange="filltext(this);">
            <option>Red</option>
            <option>Red Flowers</option>
            <option>Green</option>
            <option>Grass</option>
        </select>
    </form>
</body>
</html>

Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page @ Code Couch
http://www.codecouch.com/dan/

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close