This JavaScript code snippet helps you to create an autocomplete dropdown. It defines a function called “createCountryListItem” that takes an object with optional properties for “country” and “abbreviation”. The function returns an HTML string that represents a list item with class “country” and data-value attributes that include the abbreviation and country name.
Finally, the add event listeners for the “keyup”, “focus”, and “blur” events to the “.countries-input” element. When the input is focused, the “.countries-list-container” element is shown, and when it’s blurred, it’s hidden. When the user types in the input, the “filterCountriesOnChange” function is called to filter the displayed countries. The code also ensures that the “generateCountriesList” function is called once the DOM content has loaded.
How to Create JavaScript Autocomplete Dropdown
First of all, load the following assets into the head tag of your HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
Create the HTML structure for the dropdown as follows:
<div class="autocomplete-drop-down">
<div class="countries-input-container">
<input class="countries-input" placeholder="Country" type="text">
<div class="input-underline"></div>
<span class="input-arrow">▾</div>
</div>
<div class="countries-list-container">
<ul class="countries-list">
<li> </li>
</ul>
</div>
</div>
Now, style the dropdown using the following CSS styles:
html {
padding: 20px;
font-family: roboto, helvetica, arial, sans-serif;
font-size: 16px;
}
input {
font-size: 16px;
}
.autocomplete-drop-down {
position: relative;
width: 30vw;
}
.countries-input,
.countries-list {
border: none;
box-sizing: border-box;
width: 30vw;
}
.cd__main{
display: block !important;
}
.countries-input-container {
height: 2.5rem;
position: relative;
}
.countries-input {
height: 2.5rem;
padding: 1em 0.5em;
position: relative;
transition: outline 0.2s ease;
transition-delay: 0.2s;
}
.countries-input:focus + .input-underline {
transform: scaleY(0);
}
.countries-input:focus ~ .input-arrow {
transform: rotate(180deg);
}
.input-underline {
background: #000;
bottom: 0;
content: "";
height: 2px;
left: 0;
position: absolute;
transform-origin: center bottom;
transition: transform 0.3s ease;
width: 30vw;
}
.input-arrow {
position: absolute;
right: 0.5em;
top: calc(50% - 0.5rem);
transition: transform 0.3s ease;
}
.countries-list-container {
box-shadow: 0 8px 15px 0 rgba(33, 33, 33, 0.2);
opacity: 0;
position: relative;
transform: scaleY(0);
visibility: hidden;
transform-origin: center top;
transition: all 0.3s ease;
width: 30vw;
}
.countries-list-container.visible {
opacity: 1;
transform: scaleY(1);
visibility: visible;
}
.countries-list {
align-content: middle;
display: flex;
flex-wrap: wrap;
max-height: 11.5em;
overflow-x: hidden;
overflow-y: scroll;
width: 30vw;
}
.country {
cursor: pointer;
padding: 0.5em 0;
transition: background 0.5s ease;
width: 30vw;
}
.country:hover {
background: #CCC;
}
.country span {
box-sizing: border-box;
display: inline-block;
}
.country--abbreviation {
padding: 0 1em;
width: 18%;
}
.country--name {
width: 78%;
}
Finally, add the following JavaScript function for its functionality:
const countriesByAbbreviation = [
{
country: "Afghanistan",
abbreviation: "AF" },
{
country: "Albania",
abbreviation: "AL" },
{
country: "Algeria",
abbreviation: "DZ" },
{
country: "American Samoa",
abbreviation: "AS" },
{
country: "Andorra",
abbreviation: "AD" },
{
country: "Angola",
abbreviation: "AO" },
{
country: "Anguilla",
abbreviation: "AI" },
{
country: "Antarctica",
abbreviation: "AQ" },
{
country: "Antigua and Barbuda",
abbreviation: "AG" },
{
country: "Argentina",
abbreviation: "AR" },
{
country: "Armenia",
abbreviation: "AM" },
{
country: "Aruba",
abbreviation: "AW" },
{
country: "Australia",
abbreviation: "AU" },
{
country: "Austria",
abbreviation: "AT" },
{
country: "Azerbaijan",
abbreviation: "AZ" },
{
country: "Bahamas",
abbreviation: "BS" },
{
country: "Bahrain",
abbreviation: "BH" },
{
country: "Bangladesh",
abbreviation: "BD" },
{
country: "Barbados",
abbreviation: "BB" },
{
country: "Belarus",
abbreviation: "BY" },
{
country: "Belgium",
abbreviation: "BE" },
{
country: "Belize",
abbreviation: "BZ" },
{
country: "Benin",
abbreviation: "BJ" },
{
country: "Bermuda",
abbreviation: "BM" },
{
country: "Bhutan",
abbreviation: "BT" },
{
country: "Bolivia",
abbreviation: "BO" },
{
country: "Bosnia and Herzegovina",
abbreviation: "BA" },
{
country: "Botswana",
abbreviation: "BW" },
{
country: "Bouvet Island",
abbreviation: "BV" },
{
country: "Brazil",
abbreviation: "BR" },
{
country: "British Indian Ocean Territory",
abbreviation: "IO" },
{
country: "Brunei",
abbreviation: "BN" },
{
country: "Bulgaria",
abbreviation: "BG" },
{
country: "Burkina Faso",
abbreviation: "BF" },
{
country: "Burundi",
abbreviation: "BI" },
{
country: "Cambodia",
abbreviation: "KH" },
{
country: "Cameroon",
abbreviation: "CM" },
{
country: "Canada",
abbreviation: "CA" },
{
country: "Cape Verde",
abbreviation: "CV" },
{
country: "Cayman Islands",
abbreviation: "KY" },
{
country: "Central African Republic",
abbreviation: "CF" },
{
country: "Chad",
abbreviation: "TD" },
{
country: "Chile",
abbreviation: "CL" },
{
country: "China",
abbreviation: "CN" },
{
country: "Christmas Island",
abbreviation: "CX" },
{
country: "Cocos (Keeling) Islands",
abbreviation: "CC" },
{
country: "Colombia",
abbreviation: "CO" },
{
country: "Comoros",
abbreviation: "KM" },
{
country: "Congo",
abbreviation: "CG" },
{
country: "Cook Islands",
abbreviation: "CK" },
{
country: "Costa Rica",
abbreviation: "CR" },
{
country: "Croatia",
abbreviation: "HR" },
{
country: "Cuba",
abbreviation: "CU" },
{
country: "Cyprus",
abbreviation: "CY" },
{
country: "Czech Republic",
abbreviation: "CZ" },
{
country: "Denmark",
abbreviation: "DK" },
{
country: "Djibouti",
abbreviation: "DJ" },
{
country: "Dominica",
abbreviation: "DM" },
{
country: "Dominican Republic",
abbreviation: "DO" },
{
country: "East Timor",
abbreviation: "TP" },
{
country: "Ecuador",
abbreviation: "EC" },
{
country: "Egypt",
abbreviation: "EG" },
{
country: "El Salvador",
abbreviation: "SV" },
{
country: "England",
abbreviation: null },
{
country: "Equatorial Guinea",
abbreviation: "GQ" },
{
country: "Eritrea",
abbreviation: "ER" },
{
country: "Estonia",
abbreviation: "EE" },
{
country: "Ethiopia",
abbreviation: "ET" },
{
country: "Falkland Islands",
abbreviation: "FK" },
{
country: "Faroe Islands",
abbreviation: "FO" },
{
country: "Fiji Islands",
abbreviation: "FJ" },
{
country: "Finland",
abbreviation: "FI" },
{
country: "France",
abbreviation: "FR" },
{
country: "French Guiana",
abbreviation: "GF" },
{
country: "French Polynesia",
abbreviation: "PF" },
{
country: "French Southern territories",
abbreviation: "TF" },
{
country: "Gabon",
abbreviation: "GA" },
{
country: "Gambia",
abbreviation: "GM" },
{
country: "Georgia",
abbreviation: "GE" },
{
country: "Germany",
abbreviation: "DE" },
{
country: "Ghana",
abbreviation: "GH" },
{
country: "Gibraltar",
abbreviation: "GI" },
{
country: "Greece",
abbreviation: "GR" },
{
country: "Greenland",
abbreviation: "GL" },
{
country: "Grenada",
abbreviation: "GD" },
{
country: "Guadeloupe",
abbreviation: "GP" },
{
country: "Guam",
abbreviation: "GU" },
{
country: "Guatemala",
abbreviation: "GT" },
{
country: "Guinea",
abbreviation: "GN" },
{
country: "Guinea-Bissau",
abbreviation: "GW" },
{
country: "Guyana",
abbreviation: "GY" },
{
country: "Haiti",
abbreviation: "HT" },
{
country: "Heard Island and McDonald Islands",
abbreviation: "HM" },
{
country: "Holy See (Vatican City State)",
abbreviation: "VA" },
{
country: "Honduras",
abbreviation: "HN" },
{
country: "Hong Kong",
abbreviation: "HK" },
{
country: "Hungary",
abbreviation: "HU" },
{
country: "Iceland",
abbreviation: "IS" },
{
country: "India",
abbreviation: "IN" },
{
country: "Indonesia",
abbreviation: "ID" },
{
country: "Iran",
abbreviation: "IR" },
{
country: "Iraq",
abbreviation: "IQ" },
{
country: "Ireland",
abbreviation: "IE" },
{
country: "Israel",
abbreviation: "IL" },
{
country: "Italy",
abbreviation: "IT" },
{
country: "Ivory Coast",
abbreviation: "CI" },
{
country: "Jamaica",
abbreviation: "JM" },
{
country: "Japan",
abbreviation: "JP" },
{
country: "Jordan",
abbreviation: "JO" },
{
country: "Kazakstan",
abbreviation: null },
{
country: "Kenya",
abbreviation: "KE" },
{
country: "Kiribati",
abbreviation: "KI" },
{
country: "Kuwait",
abbreviation: "KW" },
{
country: "Kyrgyzstan",
abbreviation: "KG" },
{
country: "Laos",
abbreviation: "LA" },
{
country: "Latvia",
abbreviation: "LV" },
{
country: "Lebanon",
abbreviation: "LB" },
{
country: "Lesotho",
abbreviation: "LS" },
{
country: "Liberia",
abbreviation: "LR" },
{
country: "Libyan Arab Jamahiriya",
abbreviation: "LY" },
{
country: "Liechtenstein",
abbreviation: "LI" },
{
country: "Lithuania",
abbreviation: "LT" },
{
country: "Luxembourg",
abbreviation: "LU" },
{
country: "Macao",
abbreviation: "MO" },
{
country: "Macedonia",
abbreviation: "MK" },
{
country: "Madagascar",
abbreviation: "MG" },
{
country: "Malawi",
abbreviation: "MW" },
{
country: "Malaysia",
abbreviation: "MY" },
{
country: "Maldives",
abbreviation: "MV" },
{
country: "Mali",
abbreviation: "ML" },
{
country: "Malta",
abbreviation: "MT" },
{
country: "Marshall Islands",
abbreviation: "MH" },
{
country: "Martinique",
abbreviation: "MQ" },
{
country: "Mauritania",
abbreviation: "MR" },
{
country: "Mauritius",
abbreviation: "MU" },
{
country: "Mayotte",
abbreviation: "YT" },
{
country: "Mexico",
abbreviation: "MX" },
{
country: "Micronesia, Federated States of",
abbreviation: null },
{
country: "Moldova",
abbreviation: "MD" },
{
country: "Monaco",
abbreviation: "MC" },
{
country: "Mongolia",
abbreviation: "MN" },
{
country: "Montserrat",
abbreviation: "MS" },
{
country: "Morocco",
abbreviation: "MA" },
{
country: "Mozambique",
abbreviation: "MZ" },
{
country: "Myanmar",
abbreviation: "MM" },
{
country: "Namibia",
abbreviation: "NA" },
{
country: "Nauru",
abbreviation: "NR" },
{
country: "Nepal",
abbreviation: "NP" },
{
country: "Netherlands",
abbreviation: "NL" },
{
country: "Netherlands Antilles",
abbreviation: "AN" },
{
country: "New Caledonia",
abbreviation: "NC" },
{
country: "New Zealand",
abbreviation: "NZ" },
{
country: "Nicaragua",
abbreviation: "NI" },
{
country: "Niger",
abbreviation: "NE" },
{
country: "Nigeria",
abbreviation: "NG" },
{
country: "Niue",
abbreviation: "NU" },
{
country: "Norfolk Island",
abbreviation: "NF" },
{
country: "North Korea",
abbreviation: "KP" },
{
country: "Northern Ireland",
abbreviation: null },
{
country: "Northern Mariana Islands",
abbreviation: "MP" },
{
country: "Norway",
abbreviation: "NO" },
{
country: "Oman",
abbreviation: "OM" },
{
country: "Pakistan",
abbreviation: "PK" },
{
country: "Palau",
abbreviation: "PW" },
{
country: "Palestine",
abbreviation: "PS" },
{
country: "Panama",
abbreviation: "PA" },
{
country: "Papua New Guinea",
abbreviation: "PG" },
{
country: "Paraguay",
abbreviation: "PY" },
{
country: "Peru",
abbreviation: "PE" },
{
country: "Philippines",
abbreviation: "PH" },
{
country: "Pitcairn",
abbreviation: "PN" },
{
country: "Poland",
abbreviation: "PL" },
{
country: "Portugal",
abbreviation: "PT" },
{
country: "Puerto Rico",
abbreviation: "PR" },
{
country: "Qatar",
abbreviation: "QA" },
{
country: "Reunion",
abbreviation: "RE" },
{
country: "Romania",
abbreviation: "RO" },
{
country: "Russian Federation",
abbreviation: "RU" },
{
country: "Rwanda",
abbreviation: "RW" },
{
country: "Saint Helena",
abbreviation: "SH" },
{
country: "Saint Kitts and Nevis",
abbreviation: "KN" },
{
country: "Saint Lucia",
abbreviation: "LC" },
{
country: "Saint Pierre and Miquelon",
abbreviation: "PM" },
{
country: "Saint Vincent and the Grenadines",
abbreviation: "VC" },
{
country: "Samoa",
abbreviation: "WS" },
{
country: "San Marino",
abbreviation: "SM" },
{
country: "Sao Tome and Principe",
abbreviation: "ST" },
{
country: "Saudi Arabia",
abbreviation: "SA" },
{
country: "Scotland",
abbreviation: null },
{
country: "Senegal",
abbreviation: "SN" },
{
country: "Seychelles",
abbreviation: "SC" },
{
country: "Sierra Leone",
abbreviation: "SL" },
{
country: "Singapore",
abbreviation: "SG" },
{
country: "Slovakia",
abbreviation: "SK" },
{
country: "Slovenia",
abbreviation: "SI" },
{
country: "Solomon Islands",
abbreviation: "SB" },
{
country: "Somalia",
abbreviation: "SO" },
{
country: "South Africa",
abbreviation: "ZA" },
{
country: "South Georgia and the South Sandwich Islands",
abbreviation: "GS" },
{
country: "South Korea",
abbreviation: "KR" },
{
country: "South Sudan",
abbreviation: null },
{
country: "Spain",
abbreviation: "ES" },
{
country: "SriLanka",
abbreviation: null },
{
country: "Sudan",
abbreviation: "SD" },
{
country: "Suriname",
abbreviation: "SR" },
{
country: "Svalbard and Jan Mayen",
abbreviation: "SJ" },
{
country: "Swaziland",
abbreviation: "SZ" },
{
country: "Sweden",
abbreviation: "SE" },
{
country: "Switzerland",
abbreviation: "CH" },
{
country: "Syria",
abbreviation: "SY" },
{
country: "Tajikistan",
abbreviation: "TJ" },
{
country: "Tanzania",
abbreviation: "TZ" },
{
country: "Thailand",
abbreviation: "TH" },
{
country: "The Democratic Republic of Congo",
abbreviation: null },
{
country: "Togo",
abbreviation: "TG" },
{
country: "Tokelau",
abbreviation: "TK" },
{
country: "Tonga",
abbreviation: "TO" },
{
country: "Trinidad and Tobago",
abbreviation: "TT" },
{
country: "Tunisia",
abbreviation: "TN" },
{
country: "Turkey",
abbreviation: "TR" },
{
country: "Turkmenistan",
abbreviation: "TM" },
{
country: "Turks and Caicos Islands",
abbreviation: "TC" },
{
country: "Tuvalu",
abbreviation: "TV" },
{
country: "Uganda",
abbreviation: "UG" },
{
country: "Ukraine",
abbreviation: "UA" },
{
country: "United Arab Emirates",
abbreviation: "AE" },
{
country: "United Kingdom",
abbreviation: "GB" },
{
country: "United States",
abbreviation: "US" },
{
country: "United States Minor Outlying Islands",
abbreviation: "UM" },
{
country: "Uruguay",
abbreviation: "UY" },
{
country: "Uzbekistan",
abbreviation: "UZ" },
{
country: "Vanuatu",
abbreviation: "VU" },
{
country: "Venezuela",
abbreviation: "VE" },
{
country: "Vietnam",
abbreviation: "VN" },
{
country: "Virgin Islands, British",
abbreviation: null },
{
country: "Virgin Islands, U.S.",
abbreviation: null },
{
country: "Wales",
abbreviation: null },
{
country: "Wallis and Futuna",
abbreviation: "WF" },
{
country: "Western Sahara",
abbreviation: "EH" },
{
country: "Yemen",
abbreviation: "YE" },
{
country: "Yugoslavia",
abbreviation: "YU" },
{
country: "Zambia",
abbreviation: "ZM" },
{
country: "Zimbabwe",
abbreviation: "ZW" }];
const filterCountriesOnChange = event => {
const value = event.target.value.toLowerCase();
const result = countriesByAbbreviation.filter(countryObject => {
const abbreviation = countryObject.abbreviation || '';
const country = countryObject.country || '';
const countryString = `${abbreviation} ${country}`;
return countryString.toLowerCase().includes(value);
});
generateCountriesList(result);
};
const addEventListenerToCountries = () => {
const countriesInput = document.querySelector('.countries-input');
const countryListItems = document.querySelectorAll('.country');
let countryListItemIndex = 0;
const countryListItemILength = countryListItems.length;
for (countryListItemIndex; countryListItemIndex < countryListItemILength; countryListItemIndex++) {
const countryListItem = countryListItems[countryListItemIndex];
countryListItem.addEventListener('mousedown', event => {
event.preventDefault();
event.stopPropagation();
const value = event.currentTarget.innerText;
countriesInput.value = value;
filterCountriesOnChange({ target: { value } });
countriesInput.focus();
});
}
};
const createCountryListItem = ({ country = '', abbreviation = '' }) =>
`<li class="country" data-value="${abbreviation} ${country}"><span class="country--abbreviation">${abbreviation}</span> <span class="country--name">${country}</span></li>`;
const generateCountriesList = countriesArray => {
const countriesList = document.querySelector('.countries-list');
countriesList.innerHTML = '';
const countriesLength = countriesArray.length;
for (let countryIndex = 0; countryIndex < countriesLength; countryIndex++) {
countriesList.innerHTML += createCountryListItem(countriesArray[countryIndex]);
}
addEventListenerToCountries();
};
document.addEventListener("DOMContentLoaded", () => {
const countriesInput = document.querySelector('.countries-input');
generateCountriesList(countriesByAbbreviation);
countriesInput.addEventListener('keyup', filterCountriesOnChange);
countriesInput.addEventListener('focus', () => {
const countriesList = document.querySelector('.countries-list-container');
countriesList.classList.add('visible');
});
countriesInput.addEventListener('blur', event => {
const countriesList = document.querySelector('.countries-list-container');
countriesList.classList.remove('visible');
});
});
That’s all! hopefully, you have successfully created the JavaScript autocomplete dropdown. If you have any questions or suggestions, feel free to comment below.
