| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Autocomplete</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font: 20px; | |
| background-color: black; | |
| color: yellow; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .autocomplete { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| input { | |
| border: 2px solid transparent; | |
| background-color: #f1f1f1; | |
| width: 100%; | |
| font-size: 20px; | |
| padding: 10px; | |
| } | |
| input[type=text] { | |
| background-color: transparent; | |
| border: 2px solid white; | |
| color: white; | |
| width: 500px; | |
| outline: none; | |
| } | |
| input[type=submit] { | |
| background-color: rgb(161, 233, 54); | |
| width: 500px; | |
| border-radius: 10px; | |
| outline: none; | |
| cursor: pointer; | |
| margin-left: 30px; | |
| font-weight: bolder; | |
| } | |
| .autocomplete-items { | |
| position: absolute; | |
| border: 2px solid #dd44d4; | |
| border-bottom: none; | |
| border-top: none; | |
| z-index: 99; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| } | |
| .autocomplete-items div { | |
| padding: 10px; | |
| cursor: pointer; | |
| background-color: rgb(50, 50, 51); | |
| color: white; | |
| border-bottom: 2px solid #d4d4d4; | |
| } | |
| .autocomplete-items div:hover { | |
| background-color: blue; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Autocomplete by Sync Programming</h1> | |
| <p>Start typing in the search of any programming language name</p> | |
| <form action="" autocomplete="off"> | |
| <div class="input"> | |
| <div class="autocomplete"> | |
| <input type="text" placeholder="PROGRAMMING LANGUAGE" id="myInput" name="programminglanguage"> | |
| </div> | |
| <input type="submit" value="Submit"> | |
| </div> | |
| </form> | |
| <script> | |
| var languages = ['python', 'java', 'javacript', 'kotlin', 'go', 'ruby', 'c', 'c++', 'c#', 'swift', 'dart'] | |
| function autocomplete(inp, arr) { | |
| var currentFocus; | |
| inp.addEventListener("input", function (e) { | |
| var a, b, i, val = this.value; | |
| closeAllLists(); | |
| if (!val) { return false; } | |
| currentFocus = -1 | |
| a = document.createElement("DIV"); | |
| a.setAttribute("id", this.id + "autocomplete-list"); | |
| a.setAttribute("class", "autocomplete-items"); | |
| this.parentNode.appendChild(a); | |
| for (i = 0; i < arr.length; i++) { | |
| if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { | |
| b = document.createElement("DIV"); | |
| b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; | |
| b.innerHTML += arr[i].substr(val.length); | |
| b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; | |
| b.addEventListener("click", function (e) { | |
| inp.value = this.getElementsByTagName("input")[0].value; | |
| closeAllLists(); | |
| }); | |
| a.appendChild(b); | |
| } | |
| } | |
| }); | |
| inp.addEventListener("keydown", function (e) { | |
| var x = document.getElementById(this.id + "autocomplete-list"); | |
| if (x) x = x.getElementsByTagName("div"); | |
| if (e.keyCode == 40) { | |
| currentFocus++; | |
| addActive(x); | |
| } else if (e.keyCode == 38) { | |
| currentFocus--; | |
| addActive(x); | |
| } else if (e.keyCode == 13) { | |
| e.preventDefault(); | |
| if (currentFocus > -1) { | |
| if (x) x[currentFocus].click(); | |
| } | |
| } | |
| }); | |
| 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 closeAllLists(elmnt) { | |
| 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]); | |
| } | |
| } | |
| } | |
| document.addEventListener("click", function (e) { | |
| closeAllLists(e.target); | |
| }); | |
| } | |
| autocomplete(document.getElementById('myInput'), languages); | |
| </script> | |
| </body> | |
| </html> |
No comments:
Post a Comment