How to Create a Auto Complete Form In Html
Auto Complete Form Code below here..
Step-1:- Create a HTML Page .
1- index.html
Step-2:- Write the Code of (Index.html) Page.
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<h2>Autocomplete</h2>
<p>Start typing:</p>
<form autocomplete=off action=/action_page.php>
<div class=autocomplete style="width:300px;">
<input id=myInput type=text name=myCountry placeholder=Country required>
</div>
<input type=submit>
</form>
<script>function autocomplete(c,a){var f;c.addEventListener("input",function(k){var h,g,j,l=this.value;b();if(!l){return false}f=-1;h=document.createElement("DIV");h.setAttribute("id",this.id+"autocomplete-list");h.setAttribute("class","autocomplete-items");this.parentNode.appendChild(h);for(j=0;j<a.length;j++){if(a[j].substr(0,l.length).toUpperCase()==l.toUpperCase()){g=document.createElement("DIV");g.innerHTML="<strong>"+a[j].substr(0,l.length)+"</strong>";g.innerHTML+=a[j].substr(l.length);g.innerHTML+="<input type='hidden' value='"+a[j]+"'>";g.addEventListener("click",function(i){c.value=this.getElementsByTagName("input")[0].value;b()});h.appendChild(g)}}});c.addEventListener("keydown",function(h){var g=document.getElementById(this.id+"autocomplete-list");if(g){g=g.getElementsByTagName("div")}if(h.keyCode==40){f++;d(g)}else{if(h.keyCode==38){f--;d(g)}else{if(h.keyCode==13){h.preventDefault();if(f>-1){if(g){g[f].click()}}}}}});function d(g){if(!g){return false}e(g);if(f>=g.length){f=0}if(f<0){f=(g.length-1)}g[f].classList.add("autocomplete-active")}function e(g){for(var h=0;h<g.length;h++){g[h].classList.remove("autocomplete-active")}}function b(j){var g=document.getElementsByClassName("autocomplete-items");for(var h=0;h<g.length;h++){if(j!=g[h]&&j!=c){g[h].parentNode.removeChild(g[h])}}}document.addEventListener("click",function(g){b(g.target)})}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 Arfrican 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","Nauro","Nepal","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"];autocomplete(document.getElementById("myInput"),countries);</script>
</body>
</html>
Step-3:- And Now the time of CSS Page.
Create a CSS Page....
1- style.css
Step-4:- Write the Code of (style.css) Page.
* {
box-sizing: border-box;
}
body {
font: 16px Arial;
}
.autocomplete {
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;
cursor: pointer;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
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 {
background-color: #e9e9e9;
}
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
Thanks
Comments
Post a Comment