<script> function autocomplete(input, proposals) { var currentFocus; function createCompletionContainer(id) { let div = document.createElement("DIV"); div.setAttribute("id", id + "autocomplete-list"); div.setAttribute("class", "autocomplete-items"); return div; } function createCompletionProposal(inputElement, incomplete, complete) { let div = document.createElement("DIV"); /*make the matching letters bold:*/ const start = complete.toUpperCase().indexOf(incomplete.toUpperCase()); div.innerHTML = complete.substr(0, start) + "<strong>" + complete.substr(start, incomplete.length) + "</strong>" + complete.substr(start+incomplete.length) /*insert a input field that will hold the current array item's value:*/ + "<input type='hidden' value='" + complete + "'>"; /*execute a function when someone clicks on the item value (DIV element):*/ div.addEventListener("click", function(e) { /*insert the value for the autocomplete text field:*/ inputElement.value = this.getElementsByTagName("input")[0].value; /*close the list of autocompleted values, or any other open lists of autocompleted values:*/ closeAllOpenedLists(); }); return div; } function addActive(x) { if (!x) return false; removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllOpenedLists(elmnt) { /*close all autocomplete lists in the document, except the one passed as an argument:*/ var x = document.getElementsByClassName("autocomplete-items"); for (var i = 0; i < x.length; i++) { if (elmnt != x[i] && elmnt != input) { x[i].parentNode.removeChild(x[i]); } } } /*execute a function when someone writes in the text field:*/ input.addEventListener("input", function(e) { const incomplete = this.value; closeAllOpenedLists(); if (!incomplete) { return false; } currentFocus = -1; const container = createCompletionContainer(this.id) this.parentNode.appendChild(container); /*for each item in the array...*/ for (let i = 0; i < proposals.length; i++) { /*check if the item starts with the same letters as the text field value:*/ if (proposals[i].toUpperCase().includes(incomplete.toUpperCase())) { /*create a DIV element for each matching element:*/ container.appendChild(createCompletionProposal(input, incomplete, proposals[i])); } } }); /*execute a function presses a key on the keyboard:*/ input.addEventListener("keydown", function(e) { var container = document.getElementById(this.id + "autocomplete-list")?.getElementsByTagName("div"); if (e.keyCode == 40) { currentFocus++; addActive(container); } else if (e.keyCode == 38) { //up currentFocus--; addActive(container); } else if (e.keyCode == 13) { if (currentFocus > -1 && container) { container[currentFocus].click(); } } }); /*execute a function when someone clicks in the document:*/ document.addEventListener("click", function (e) { closeAllOpenedLists(e.target); }); } </script>