Easy way to Create Autocomplete on an Input Field pure JavaScript

In this code we learn how to create input field with autocomplete, we need to do this to Create input tag, datalist tag, and option tags with values from array words

<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>

© Manajmnt code

Share to :

☷✎