Auto Complete Textfield

Timothy Groves Apr 21, 2006

General

As the user enters information into a textfield, this script will provide suggestions based on the list in the array.

Notes

Created by: Timothy Groves
Web Site: http://www.brandspankingnew.net/
Posted: April 21, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: autoCompleteTextfield.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
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";
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="autoCompleteTextfield.js"></script>

Body

Paste this code into the BODY section of your HTML document


<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="img/mi_arr2_left.gif" width="10" height="10" border="0" align="textbottom"></a>
      </div>
  </div>
</form>
</div>
</div>

Other

Download the images using the URL below:

Download the images here

Leave a Response

(2 comments)

Very Handy script. I've modified it so that it reads the fields from a database so instead of countries, I can use it to auto fill a form for customer last names, Invoice number...you name it.[br /][br /]On one site, I'm having a problem with the sug_btn element.[br /][br /]Cant quite figure that one out but it's causing an error on one page I built with the script but not with others. A little more info on the sug_btn object and how it gets called and defined might help me.[br /][br /]But great script !!!!!!!!!

Charles Aug 8, 2008

LKASDKFJIAS[br /]SDFSDFJKSDJF[br /]ASDKFJLADSJFSA[br /]SDLFJSLDKJF[br /]ASSDFJKSJDF[br /]SADFFJSDF

SHIVA Dec 3, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details