Easy way to Create Autocomplete on an Input Field pure JavaScript
<style>
input{width:250px;border:0 ;border-bottom:1px solid #e00; padding:5px; margin:5px auto }
input:focus{outline:0; }
input::-webkit-calendar-picker-indicator {
display: none !important;
}
</style>
<form id="searchbar" action="/search"></form>
<script>
window.addEventListener("load", function(){
var mycars = new Array();
mycars = ["html","css","javscript","Jquery", "bootstrap"]
var options = '';
for (var i = 0; i < mycars.length; i++) {
options += '<option value="' + mycars[i] + '" />';
}
/*create input tag*/
var inputsrc= document.createElement("INPUT");
inputsrc.setAttribute("list", "anrede");
inputsrc.setAttribute("type", "search");
inputsrc.setAttribute("placeholder", "search...");
document.getElementById("searchbar").appendChild(inputsrc);
/*create datalist tag*/
var datalist= document.createElement("DATALIST");
datalist.setAttribute("id", "anrede");
document.getElementById("searchbar").appendChild(datalist);
datalist.innerHTML=options;
})
</script>
© 2025 Manajmnt code
Thanks... irregardless the Spartan look of your website, this code snippet works well and did help me. Keep up the good work
ReplyDelete