Auto-Complete Words Textfield

[JavaScriptBank]

As soon as the user enters characters into a textfield, this JavaScript will provide suggestions based on the list in the array.... detail

Demo: Auto-Complete Words Textfield

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

<script type=text/javascript>
// Created by: Timothy Groves :: http://www.brandspankingnew.net/

countries = new Array(
  "Afghanistan",
  "Albania",
  "Algeria",
  "Andorra",
  "Angola",
  "Antigua and Barbuda",
  "Argentina",
  "Armenia",
  "Australia",
  "Austria",
  "Azerbaijan",
  "Bahamas",
  "Bahrain",
  "Bangladesh",
  "Barbados",
  "Belarus",
  "Belgium",
  "Belize",
  "Benin",
  "Bhutan",
  "Bolivia",
  "Bosnia and Herzegovina",
  "Botswana",
  "Brazil",
  "Brunei",
  "Bulgaria",
  "Burkina Faso",
  "Burundi",
  "Cambodia",
  "Cameroon",
  "Canada",
  "Cape Verde",
  "Central African Republic",
  "Chad",
  "Chile",
  "China",
  "Colombia",
  "Comoros",
  "Congo (Brazzaville)",
  "Congo, Democratic Republic of the",
  "Costa Rica",
  "Côte d'Ivoire",
  "Croatia",
  "Cuba",
  "Cyprus",
  "Czech Republic",
  "Denmark",
  "Djibouti",
  "Dominica",
  "Dominican Republic",
  "East Timor",
  "Ecuador",
  "Egypt",
  "El Salvador",
  "Equatorial Guinea",
  "Eritrea",
  "Estonia",
  "Ethiopia",
  "Fiji",
  "Finland",
  "France",
  "Gabon",
  "Gambia, The",
  "Georgia",
  "Germany",
  "Ghana",
  "Greece",
  "Grenada",
  "Guatemala",
  "Guinea",
  "Guinea-Bissau",
  "Guyana",
  "Haiti",
  "Honduras",
  "Hungary",
  "Iceland",
  "India",
  "Indonesia",
  "Iran",
  "Iraq",
  "Ireland",
  "Israel",
  "Italy",
  "Jamaica",
  "Japan",
  "Jordan",
  "Kazakhstan",
  "Kenya",
  "Kiribati",
  "Korea, North",
  "Korea, South",
  "Kuwait",
  "Kyrgyzstan",
  "Laos",
  "Latvia",
  "Lebanon",
  "Lesotho",
  "Liberia",
  "Libya",
  "Liechtenstein",
  "Lithuania",
  "Luxembourg",
  "Macedonia",
  "Madagascar",
  "Malawi",
  "Malaysia",
  "Maldives",
  "Mali",
  "Malta",
  "Marshall Islands",
  "Mauritania",
  "Mauritius",
  "Mexico",
  "Micronesia",
  "Moldova",
  "Monaco",
  "Mongolia",
  "Morocco",
  "Mozambique",
  "Myanmar",
  "Namibia",
  "Nauru",
  "Nepal",
  "Netherlands",
  "New Zealand",
  "Nicaragua",
  "Niger",
  "Nigeria",
  "Norway",
  "Oman",
  "Pakistan",
  "Palau",
  "Panama",
  "Papua New Guinea",
  "Paraguay",
  "Peru",
  "Philippines",
  "Poland",
  "Portugal",
  "Qatar",
  "Romania",
  "Russia",
  "Rwanda",
  "Saint Kitts and Nevis",
  "Saint Lucia",
  "Saint Vincent and The Grenadines",
  "Samoa",
  "San Marino",
  "Sao Tome and Principe",
  "Saudi Arabia",
  "Senegal",
  "Serbia and Montenegro",
  "Seychelles",
  "Sierra Leone",
  "Singapore",
  "Slovakia",
  "Slovenia",
  "Solomon Islands",
  "Somalia",
  "South Africa",
  "Spain",
  "Sri Lanka",
  "Sudan",
  "Suriname",
  "Swaziland",
  "Sweden",
  "Switzerland",
  "Syria",
  "Taiwan",
  "Tajikistan",
  "Tanzania",
  "Thailand",
  "Togo",
  "Tonga",
  "Trinidad and Tobago",
  "Tunisia",
  "Turkey",
  "Turkmenistan",
  "Tuvalu",
  "Uganda",
  "Ukraine",
  "United Arab Emirates",
  "United Kingdom",
  "United States",
  "Uruguay",
  "Uzbekistan",
  "Vanuatu",
  "Vatican City",
  "Venezuela",
  "Vietnam",
  "Western Sahara",
  "Yemen",
  "Zambia",
  "Zimbabwe"
);

var sug = "";
var sug_disp = "";

function getCountry() {
  var input = document.forms['address_frm'].country.value;
  var len = input.length;
  sug_disp = ""; sug = "";
  
  if (input.length) {
    // get matching country from array
    for (ele in countries)
    {
      if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
      {
        sug_disp = input + countries[ele].substr(len);
        sug = countries[ele];
        break;
      }
    }
  } 
  document.forms['address_frm'].sug_country.value = sug_disp;
  if (!sug.length || input == sug_disp)
    document.getElementById('sug_btn').style.display = "none";
  else
    document.getElementById('sug_btn').style.display = "block";
}

function setCountry() {
  document.forms['address_frm'].country.value = sug;
  hideSug();
}

function hideSug() {
  document.forms['address_frm'].sug_country.value = "";
  document.getElementById('sug_btn').style.display = "none";
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
  <div>Search for a destination:</a>
  <div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
  <div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
    <input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
  </div>
  <div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">

    <input autocomplete="off" type="text" name="country" style="background: none; color:#39f; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
  </div>
    <div id="sug_btn" style="position: absolute; top: 5px; right: 5px; z-index: 3; display: none;">
        <a href="#" onclick="setCountry()"><img src="mi_arr2_left.gif" width="10" height="10" border="0" align="textbottom"></a>
      </div>
  </div>
</form>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: downloads
Files
mi_arr2_left.gif

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()