· 8 years ago · Jul 09, 2018, 11:48 PM
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1.0">
5<style>
6* {
7 box-sizing: border-box;
8}
9body {
10 font: 16px Arial;
11}
12.autocomplete {
13 /*the container must be positioned relative:*/
14 position: relative;
15 display: inline-block;
16}
17input {
18 border: 1px solid transparent;
19 background-color: #f1f1f1;
20 padding: 10px;
21 font-size: 16px;
22}
23input[type=text] {
24 background-color: #f1f1f1;
25 width: 100%;
26}
27
28.autocomplete-items {
29 position: absolute;
30 border: 1px solid #d4d4d4;
31 border-bottom: none;
32 border-top: none;
33 z-index: 99;
34 /*position the autocomplete items to be the same width as the container:*/
35 top: 100%;
36 left: 0;
37 right: 0;
38}
39.autocomplete-items div {
40 padding: 10px;
41 cursor: pointer;
42 background-color: #fff;
43 border-bottom: 1px solid #d4d4d4;
44}
45.autocomplete-items div:hover {
46 /*when hovering an item:*/
47 background-color: #e9e9e9;
48}
49.autocomplete-active {
50 /*when navigating through the items using the arrow keys:*/
51 background-color: DodgerBlue !important;
52 color: #ffffff;
53}
54</style>
55</head>
56
57<body>
58
59<h2>Autocomplete</h2>
60
61<p>Start typing:</p>
62
63 <div class="autocomplete" style="width:300px;">
64 <input id="myInput" type="text" name="myCountry" placeholder="Country">
65 </div>
66
67<script>
68function autocomplete(inp, arr, car) {
69 var currentFocus;
70
71 inp.addEventListener("input", function(e) {
72 var a, b, i, val = this.value;
73 closeAllLists();
74 if (!val) { return false;}
75
76 var search = val.indexOf(car);
77 var longi = val.length;
78
79 if (longi <= 1) { return false;}
80 if (search == -1) { return false;}
81
82 var splited = val.split(car);
83 var sizeAfterAt = splited[1].length + 1;
84 var valueInput = splited[0];
85
86 currentFocus = -1;
87 a = document.createElement("DIV");
88 a.setAttribute("id", this.id + "autocomplete-list");
89 a.setAttribute("class", "autocomplete-items");
90 this.parentNode.appendChild(a);
91
92 for (i = 0; i < arr.length; i++) {
93 if (arr[i].substr(0, sizeAfterAt).toUpperCase() == val.substr(search, val.length).toUpperCase()) {
94 b = document.createElement("DIV");
95 b.innerHTML = "<strong>" + valueInput + arr[i].substr(0, sizeAfterAt) + "</strong>";
96 b.innerHTML += arr[i].substr(sizeAfterAt);
97 b.innerHTML += "<input type='hidden' value='" + valueInput + arr[i] + "'>";
98 b.addEventListener("click", function(e) {
99 inp.value = this.getElementsByTagName("input")[0].value;
100 closeAllLists();
101 });
102 a.appendChild(b);
103 }
104 }
105 });
106
107 inp.addEventListener("keydown", function(e) {
108 var x = document.getElementById(this.id + "autocomplete-list");
109 if (x) x = x.getElementsByTagName("div");
110 if (e.keyCode == 40) {
111 currentFocus++;
112 addActive(x);
113 } else if (e.keyCode == 38) {
114 currentFocus--;
115 addActive(x);
116 } else if (e.keyCode == 13) {
117 e.preventDefault();
118 if (currentFocus > -1) {
119 if (x) x[currentFocus].click();
120 }
121 }
122 });
123
124 function addActive(x) {
125 if (!x) return false;
126 removeActive(x);
127 if (currentFocus >= x.length) currentFocus = 0;
128 if (currentFocus < 0) currentFocus = (x.length - 1);
129 x[currentFocus].classList.add("autocomplete-active");
130 }
131
132 function removeActive(x) {
133 for (var i = 0; i < x.length; i++) {
134 x[i].classList.remove("autocomplete-active");
135 }
136 }
137
138 function closeAllLists(elmnt) {
139 var x = document.getElementsByClassName("autocomplete-items");
140 for (var i = 0; i < x.length; i++) {
141 if (elmnt != x[i] && elmnt != inp) {
142 x[i].parentNode.removeChild(x[i]);
143 }
144 }
145 }
146
147 document.addEventListener("click", function (e) {
148 closeAllLists(e.target);
149 });
150}
151
152var countries = ["@gmail.com", "@hotmail.com", "@outlook.com", "@yahoo.com"];
153
154autocomplete(document.getElementById("myInput"), countries, "@");
155</script>
156
157</body>
158</html>