Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- * {
- box-sizing: border-box;
- }
- body {
- font: 16px Arial;
- }
- .autocomplete {
- /*the container must be positioned relative:*/
- 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%;
- }
- .autocomplete-items {
- position: absolute;
- border: 1px solid #d4d4d4;
- border-bottom: none;
- border-top: none;
- z-index: 99;
- /*position the autocomplete items to be the same width as the container:*/
- 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 {
- /*when hovering an item:*/
- background-color: #e9e9e9;
- }
- .autocomplete-active {
- /*when navigating through the items using the arrow keys:*/
- background-color: DodgerBlue !important;
- color: #ffffff;
- }
- </style>
- </head>
- <body>
- <h2>Autocomplete</h2>
- <p>Start typing:</p>
- <div class="autocomplete" style="width:300px;">
- <input id="myInput" type="text" name="myCountry" placeholder="Country">
- </div>
- <script>
- function autocomplete(inp, arr, car) {
- var currentFocus;
- inp.addEventListener("input", function(e) {
- var a, b, i, val = this.value;
- closeAllLists();
- if (!val) { return false;}
- var search = val.indexOf(car);
- var longi = val.length;
- if (longi <= 1) { return false;}
- if (search == -1) { return false;}
- var splited = val.split(car);
- var sizeAfterAt = splited[1].length + 1;
- var valueInput = splited[0];
- 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, sizeAfterAt).toUpperCase() == val.substr(search, val.length).toUpperCase()) {
- b = document.createElement("DIV");
- b.innerHTML = "<strong>" + valueInput + arr[i].substr(0, sizeAfterAt) + "</strong>";
- b.innerHTML += arr[i].substr(sizeAfterAt);
- b.innerHTML += "<input type='hidden' value='" + valueInput + 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);
- });
- }
- var countries = ["@gmail.com", "@hotmail.com", "@outlook.com", "@yahoo.com"];
- autocomplete(document.getElementById("myInput"), countries, "@");
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment