How to create auto-complete
- Previous Page Multi-step Form
- Next Page Close Auto-complete
Learn how to create an auto-complete feature.
Auto-complete
Start typing:
Create an auto-complete form
Step 1 - Add HTML:
<!-- Ensure that the form has the auto-complete feature disabled: -->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
Step 2 - Create a JavaScript array:
An array containing all countries/regions in the world:
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica, Cote D'Ivoire, Croatia, Cuba, Curacao, Cyprus, Czech Republic, Denmark, Djibouti, Dominica, Dominican Republic, Ecuador, Egypt, El Salvador, Equatorial Guinea, Eritrea, Estonia, Ethiopia, Falkland Islands, Faroe Islands, Fiji, Finland, France, French Polynesia, French West Indies, Gabon, Gambia, Georgia, Germany, Ghana, Gibraltar, Greece, Greenland, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haiti, Honduras, Hong Kong, Hungary, Iceland, India,Indonesia, Iran, Iraq, Ireland, Isle of Man, Israel, Italy, Jamaica, Japan, Jersey, Jordan, Kazakhstan, Kenya, Kiribati, Kosovo, Kuwait, Kyrgyzstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg, Macau, Macedonia, Madagascar, Malawi, Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania, Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia, Montenegro,Montserrat, Morocco, Mozambique, Myanmar, Namibia, NauruNepal, Netherlands, Netherlands Antilles, New Caledonia, New Zealand, Nicaragua, Niger, Nigeria, North Korea, Norway, Oman, Pakistan, Palau, Palestine, Panama, Papua New Guinea, Paraguay, Peru, Philippines, Poland, Portugal, Puerto Rico, Qatar, Reunion, Romania, Russia, Rwanda, Saint Pierre & Miquelon, Samoa, San Marino, Sao Tome and Principe, Saudi Arabia, Senegal, Serbia, Seychelles, Sierra Leone, Singapore, Slovakia, Slovenia, Solomon Islands, Somalia, South Africa, South Korea, South Sudan,Spain, Sri Lanka, St Kitts & Nevis, St Lucia, St Vincent, Sudan, Suriname, Swaziland, Sweden, Switzerland, Syria, Taiwan, Tajikistan, Tanzania, Thailand, Timor L'Este, Togo, Tonga, Trinidad & Tobago, Tunisia, Turkey, Turkmenistan, Turks & Caicos, Tuvalu, Uganda, Ukraine, United Arab Emirates, United Kingdom, United States of America, Uruguay, Uzbekistan, Vanuatu, Vatican City, Venezuela, Vietnam, Virgin Islands (US), Yemen, Zambia, Zimbabwe;
Step 3 - Add CSS:
The container must have 'relative' positioning.
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* The container must be relatively positioned: */
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/* Position the auto-complete items to have the same width as the container: */
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* When the mouse hovers over an item: */
background-color: #e9e9e9;
}
.autocomplete-active {
/* When using arrow keys to browse items:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
Step 4 - Add JavaScript:
function autocomplete(inp, arr) {
/* The auto-complete function requires two parameters, one is the text field element, and the other is an array of possible auto-complete values: */
var currentFocus;
/* Function executed when someone writes in the text field: */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* Close any open auto-complete value list */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* Create a DIV element containing the items (values): */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* Attach this DIV element as a child of the auto-complete container:*/
this.parentNode.appendChild(a);
/* Traverse each item in the array... */
for (i = 0; i < arr.length; i++) {
/* Check if the item starts with the same letter as the text field value: */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* Create a DIV element for each matching item: */
b = document.createElement("DIV");
/* Bold the matching letters: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* Insert an input field to save the value of the current array item: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* Execute a function when someone clicks on the item value (DIV element): */
b.addEventListener("click", function(e) {
/* Insert the value of the autocomplete text field: */
inp.value = this.getElementsByTagName("input")[0].value;
/* Close the autocomplete value list, or any other open autocomplete value list: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* Execute a function when someone presses a key on the keyboard: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* If the down arrow key is pressed, increase the currentFocus variable: */
currentFocus++;
/* And make the current item more prominent: */
addActive(x);
} else if (e.keyCode == 38) { //up
/* If the up arrow key is pressed, decrease the currentFocus variable: */
currentFocus--;
/* And make the current item more prominent: */
addActive(x);
} else if (e.keyCode == 13) {
/* If the ENTER key is pressed, prevent the form from being submitted: */
e.preventDefault();
if (currentFocus > -1) {
/* And simulate a click on the "active" item: */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* Function to classify items as "active": */
if (!x) return false;
/* First, remove the "active" class from all items: */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* Function to add the "autocomplete-active" class: */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* Function to remove the "active" class from all auto-complete items: */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* Close all auto-complete lists in the document, except the one passed as a parameter: */
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/* Function executed when someone clicks on the document */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
Step 5 - Enable auto-complete feature on "myInput":
Pass the array of countries as autocomplete The second parameter passed to the function:
<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
- Previous Page Multi-step Form
- Next Page Close Auto-complete
