Andreu | dd6cfb4 | 2019-09-22 19:52:39 +0200 | [diff] [blame] | 1 | function autocomplete(inp, obj, act) { |
| 2 | /*the autocomplete function takes two arguments, |
| 3 | the text field element and an objay of possible autocompleted values:*/ |
| 4 | var currentFocus; |
| 5 | /*execute a function when someone writes in the text field:*/ |
| 6 | inp.addEventListener("input", function(e) { |
| 7 | var a, b, i, val = this.value; |
| 8 | /*close any already open lists of autocompleted values*/ |
| 9 | clearLists(); |
| 10 | document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none"); |
| 11 | if (!val || val.length < 3) return false; |
| 12 | currentFocus = -1; |
| 13 | var is_empty = true; |
| 14 | |
| 15 | /*for each item in the object...*/ |
| 16 | for (node in obj) { |
| 17 | var nomNode = obj[node].nomcomplet; |
| 18 | |
| 19 | if (nomNode.toUpperCase().includes(val.toUpperCase())) { |
| 20 | is_empty = false; |
| 21 | var parts = nomNode.toUpperCase().split(val.toUpperCase()); |
| 22 | |
| 23 | /*create a DIV element for each matching element:*/ |
| 24 | b = document.createElement("div"); |
| 25 | b.setAttribute("class", "autocomplete-item"); |
| 26 | |
| 27 | /*make the matching letters bold:*/ |
| 28 | if (parts[0].length == 0) b.innerHTML = ""; |
| 29 | else b.innerHTML = "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(0, parts[0].length) + "</span>"; |
| 30 | |
| 31 | b.innerHTML += nomNode.substr(parts[0].length, val.length); |
| 32 | b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>"; |
Adrià Vilanova MartÃnez | 4861da6 | 2022-12-10 21:58:42 +0100 | [diff] [blame] | 33 | b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].pista + ")</span>"; |
Andreu | dd6cfb4 | 2019-09-22 19:52:39 +0200 | [diff] [blame] | 34 | |
| 35 | /*include node id to keep track of which is it*/ |
| 36 | b.dataset.id = node; |
| 37 | |
| 38 | /*execute a function when someone clicks on the item value (DIV element):*/ |
| 39 | b.addEventListener("click", function(e) { |
| 40 | /*insert the value for the autocomplete text field:*/ |
| 41 | var n = this.dataset.id; |
| 42 | inp.value = obj[n].nomcomplet; |
| 43 | |
| 44 | switch (act) { |
| 45 | case "search": |
| 46 | // Insert hidden input id and show password field if applicable |
| 47 | document.getElementById("user").value = obj[n].id; |
| 48 | $('#password').prop('disabled', (obj[n].nopassword == "nopassword")); |
| 49 | break; |
| 50 | } |
| 51 | |
| 52 | /*close the list of autocompleted values, |
| 53 | (or any other open lists of autocompleted values:*/ |
| 54 | clearLists(); |
| 55 | }); |
| 56 | |
| 57 | document.querySelector("#autocomplete-list").appendChild(b); |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block"); |
| 62 | }); |
| 63 | |
| 64 | document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() { |
| 65 | document.querySelector("#search-input").value = ""; |
| 66 | this.style.display = "none"; |
| 67 | }); |
| 68 | |
| 69 | /*execute a function presses a key on the keyboard:*/ |
| 70 | inp.addEventListener("keydown", function(e) { |
| 71 | var x = document.getElementById("autocomplete-list"); |
| 72 | if (x) x = x.getElementsByTagName("div"); |
| 73 | if (x.length == 0) return; |
| 74 | if (e.keyCode == 40) { |
| 75 | /*If the objow DOWN key is pressed, |
| 76 | increase the currentFocus variable:*/ |
| 77 | currentFocus++; |
| 78 | /*and and make the current item more visible:*/ |
| 79 | addActive(x); |
| 80 | } else if (e.keyCode == 38) { //up |
| 81 | /*If the objow UP key is pressed, |
| 82 | decrease the currentFocus variable:*/ |
| 83 | currentFocus--; |
| 84 | /*and and make the current item more visible:*/ |
| 85 | addActive(x); |
| 86 | } else if (e.keyCode == 13) { |
| 87 | /*If the ENTER key is pressed, prevent the form from being submitted,*/ |
| 88 | e.preventDefault(); |
| 89 | if (currentFocus > -1) { |
| 90 | /*and simulate a click on the "active" item:*/ |
| 91 | if (x) x[currentFocus].click(); |
| 92 | } |
| 93 | } |
| 94 | }); |
| 95 | function addActive(x) { |
| 96 | /*a function to classify an item as "active":*/ |
| 97 | if (!x) return false; |
| 98 | /*start by removing the "active" class on all items:*/ |
| 99 | removeActive(x); |
| 100 | if (currentFocus >= x.length) currentFocus = 0; |
| 101 | if (currentFocus < 0) currentFocus = (x.length - 1); |
| 102 | /*add class "autocomplete-active":*/ |
| 103 | x[currentFocus].classList.add("autocomplete-active"); |
| 104 | } |
| 105 | function removeActive(x) { |
| 106 | /*a function to remove the "active" class from all autocomplete items:*/ |
| 107 | for (var i = 0; i < x.length; i++) { |
| 108 | x[i].classList.remove("autocomplete-active"); |
| 109 | } |
| 110 | } |
| 111 | function clearLists() { |
| 112 | /*close all autocomplete lists in the document, |
| 113 | except the one passed as an argument:*/ |
| 114 | var x = document.querySelector("#autocomplete-list"); |
| 115 | x.innerHTML = ""; |
| 116 | document.querySelector(".autocomplete-container").style.display = "none"; |
| 117 | } |
| 118 | /*execute a function when someone clicks in the document:*/ |
| 119 | document.addEventListener("click", function (e) { |
| 120 | clearLists(); |
| 121 | }); |
| 122 | } |