www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help with Javascript Text Boxes

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Help with Javascript Text Boxes

    Hello

    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
    Location
    Centurion, South Africa
    Posts
    778
    A basic example, but something to start things off:

    index.html
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    
    		<script type="text/javascript">
    
    			function findOption(text, id)
    			{
    				var
    					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;
    						break;
    					}
    				}
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<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>
    		</select>
    		<input type="text" onkeyup="findOption(this.value, 'Airports');" />
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,036
    Or you could...

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title></title>
    
    		<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;
    			}
    
    		</script>
    
    	</head>
    	<body>
    		<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>
    		</select>
    		<input type="text" onkeyup="findAirport(this.value, document.selection.Airports);" />
    	</form>
    	</body>
    </html>
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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



Recent Articles