Results 1 to 3 of 3

Thread: Help with Javascript Text Boxes

  1. #1
    Join Date
    Nov 2013

    Help with Javascript Text Boxes


    I am having trouble finding out how to do this and can't find where. Here is what I am trying to do.

    I have a select box with alot of values. They are displayed like this;

    Airport Name (Airport ID)

    I want to have a text box that when the user types in the Airport ID in it, it will search through the select options for the airport, then make the airport active. So here is what I mean;

    Kansas City International (KMCI)
    Denver International (KDEN)
    Los Angeles International (KLAX)
    Miami International (KMIA)

    Say those 4 options are in the select field. Then a user types "KLAX" Into the text box without the quotes. After they type this, Los Angeles International(KLAX) becomes the active row in the select.

    I appreciate the help in advance so much!

  2. #2
    Join Date
    Dec 2011
    Centurion, South Africa
    A basic example, but something to start things off:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    		<meta charset="utf-8" />
    		<script type="text/javascript">
    			function findOption(text, id)
    					opt = document.getElementById(id),
    					i, j;
    				text = text.toLowerCase();
    				for (i = 0, j = opt.options; i < j.length; ++i) {
    					if (j[i].innerHTML.toLowerCase().indexOf(text) > -1) {
    						opt.selectedIndex = i;
    		<select id="Airports">
    			<option>Kansas City International (KMCI)</option>
    			<option>Denver International (KDEN)</option>
    			<option>Los Angeles International (KLAX)</option>
    			<option>Miami International (KMIA)</option>
    		<input type="text" onkeyup="findOption(this.value, 'Airports');" />
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Mar 2007
    Or you could...

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<script type="text/javascript">
    			function findAirport(text, id){
    				for (var i = 0, j = id.options; i < j.length; i++) 
    					if (j[i].value==text.toUpperCase()) 
    						id.selectedIndex = i;
    		<form name="selection">
    		<select name="Airports">
    			<option value="KMCI">Kansas City International (KMCI)</option>
    			<option value="KDEN">Denver International (KDEN)</option>
    			<option value="KLAX">Los Angeles International (KLAX)</option>
    			<option value="KMIA">Miami International (KMIA)</option>
    		<input type="text" onkeyup="findAirport(this.value, document.selection.Airports);" />
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center