/** * This is the autocomplete for the city suggestion * @param {*} inp * @param {*} arr */ function autocomplete_city(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", function (e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (!val) { return false; } currentFocus = -1; /*create a DIV element that will contain the items (values):*/ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /*append the DIV element as a child of the autocomplete container:*/ this.parentNode.appendChild(a); /*for each item in the array...*/ for (i = 0; i < arr.length; i++) { /*check if the item starts with the same letters as the text field value:*/ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /*create a DIV element for each matching element:*/ b = document.createElement("DIV"); /*make the matching letters bold:*/ b.innerHTML = "" + arr[i].substr(0, val.length) + ""; b.innerHTML += arr[i].substr(val.length); /*insert a input field that will hold the current array item's value:*/ b.innerHTML += ""; /*execute a function when someone clicks on the item value (DIV element):*/ b.addEventListener("click", function (e) { /*insert the value for the autocomplete text field:*/ inp.value = this.getElementsByTagName("input")[0].value; document.getElementById("location-display").textContent = this.getElementsByTagName("input")[0].value; /*close the list of autocompleted values, (or any other open lists of autocompleted values:*/ closeAllLists(); }); a.appendChild(b); } } document.getElementById("location-display").textContent = this.value; }); /*execute a function presses a key on the keyboard:*/ inp.addEventListener("keydown", function (e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /*If the arrow DOWN key is pressed, increase the currentFocus variable:*/ currentFocus++; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 38) { //up /*If the arrow UP key is pressed, decrease the currentFocus variable:*/ currentFocus--; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted,*/ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /*a function to classify an item as "active":*/ if (!x) return false; /*start by removing the "active" class on all items:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /*add class "autocomplete-active":*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(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 != inp) { x[i].parentNode.removeChild(x[i]); } } } /*execute a function when someone clicks in the document:*/ document.addEventListener("click", function (e) { closeAllLists(e.target); }); }//end autocomplete_city() /** * * @param {document.Element} inp * @param {array:string} arr */ function autocomplete_keywords(inp, arr){ /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; var parent = document.getElementById("suggested_keywords"); /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", async function (e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (!val) { return false; } // currentFocus = -1; a = document.createElement("div"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-keyword-items"); // parent.setAttribute("class", "autocomplete-keyword-items"); parent.appendChild(a); arr = await update_keywords_arr(val); /*for each item in the array...*/ for (i = 0; i < arr.length; i++) { var bflag = false; /*check if the item starts with the same letters as the text field value:*/ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { for(j = 0; j < keyword_selected_arr.length; j++){ if(arr[i].toUpperCase() == keyword_selected_arr[j].toUpperCase()){ //continue. We cannot allow duplicates console.log("DUPLICATE >>> " + arr[i].toUpperCase() + " is already in the array."); //set a flag, then break bflag = true; //break break; }else{ console.log("UNIQUE >>> " + arr[i].toUpperCase() + " is not in the list."); } } for(j = 0; j < keyword_suggested_arr.length; j++){ if(arr[i].toUpperCase() == keyword_suggested_arr[j].toUpperCase()){ //continue. We cannot allow duplicates console.log("DUPLICATE >>> " + arr[i].toUpperCase() + " is already in the array."); //set a flag, then break bflag = true; //break break; }else{ console.log("UNIQUE >>> " + arr[i].toUpperCase() + " is not in the list."); } } if(bflag){ console.log("Continue to next iteration."); continue; } var suggestion_id = "suggestion-" + arr[i]; /*create a DIV element for each matching element:*/ var suggestion_container = document.createElement("span"); var suggestion_text = document.createElement("span"); var suggestion_x = document.createElement("span"); console.log(suggestion_id); document.getElementById("suggested_keywords").scrollIntoView({behavior: "smooth", block: "center", inline: "start"}); //set the id suggestion_container.setAttribute("id", suggestion_id); //fill its text content // suggestion_text.textContent = arr[i]; suggestion_container.appendChild(suggestion_text); suggestion_container.appendChild(suggestion_x); suggestion_container.setAttribute("style", "margin-bottom: 5px; margin-left: 2px; margin-right: 2px;"); suggestion_container.setAttribute("class", "w3-tag w3-blue w3-round"); // suggestion_text.setAttribute("style", "margin-bottom: 5px; margin-left: 2px; margin-right: 2px;"); suggestion_container.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_keyword('" + arr[i] + "'); remove_element('suggested_keywords', 'selected_keywords');"); // suggestion_x.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_keyword('" + keywords[i] + "'); remove_element('suggested_keywords', 'selected_keywords');"); suggestion_x.setAttribute("class", "w3-right w3-margin-left w3-hover-text-green"); suggestion_x.innerHTML = '+'; /*make the matching letters bold:*/ suggestion_text.innerHTML = "" + arr[i].substr(0, val.length) + ""; suggestion_text.innerHTML += arr[i].substr(val.length); /*insert a input field that will hold the current array item's value:*/ // suggestion_text.innerHTML += ""; /*execute a function when someone clicks on the item value (DIV element):*/ suggestion_container.addEventListener("click", function (e) { console.log("Selected suggestion: " + suggestion_text.textContent); /*insert the value for the autocomplete text field:*/ // inp.value = this.getElementsByTagName("input")[0].value; // inp.value = this.getElementsByTagName("span")[0].value; inp.focus(); /*close the list of autocompleted values, (or any other open lists of autocompleted values:*/ // closeAllLists(); remove_element('suggested_keywords', 'selected_keywords'); }); // parent.appendChild(suggestion_container); a.appendChild(suggestion_container); remove_element('suggested_keywords', 'selected_keywords'); } } }); /*execute a function presses a key on the keyboard:*/ inp.addEventListener("keydown", function (e) { console.log("keydown: suggested_keywords"); var x = document.getElementById("suggested_keywords"); if (x) x = x.getElementsByTagName("span"); if (e.keyCode == 40) { /*If the arrow DOWN key is pressed, increase the currentFocus variable:*/ currentFocus++; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 38) { //up /*If the arrow UP key is pressed, decrease the currentFocus variable:*/ currentFocus--; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted,*/ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /*a function to classify an item as "active":*/ if (!x) return false; /*start by removing the "active" class on all items:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /*add class "autocomplete-active":*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(elmnt) { /*close all autocomplete lists in the document, except the one passed as an argument:*/ var x = document.getElementsByClassName("autocomplete-keyword-items"); for (var i = 0; i < x.length; i++) { if (elmnt != x[i] && elmnt != inp) { x[i].parentNode.removeChild(x[i]); } } remove_element('suggested_keywords', 'selected_keywords'); } /*execute a function when someone clicks in the document:*/ // document.addEventListener("click", function (e) { // closeAllLists(e.target); // }); } /** * This is the autocomplete for the restaurant suggestion * @param {*} inp * @param {*} arr */ function autocomplete_restaurant(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", function (e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (!val) { return false; } currentFocus = -1; /*create a DIV element that will contain the items (values):*/ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /*append the DIV element as a child of the autocomplete container:*/ this.parentNode.appendChild(a); /*for each item in the array...*/ for (i = 0; i < arr.length; i++) { /*check if the item starts with the same letters as the text field value:*/ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /*create a DIV element for each matching element:*/ b = document.createElement("DIV"); /*make the matching letters bold:*/ b.innerHTML = "" + arr[i].substr(0, val.length) + ""; b.innerHTML += arr[i].substr(val.length); /*insert a input field that will hold the current array item\"s value:*/ b.innerHTML += ""; /*execute a function when someone clicks on the item value (DIV element):*/ b.addEventListener("click", function (e) { /*insert the value for the autocomplete text field:*/ inp.value = this.getElementsByTagName("input")[0].value; /*close the list of autocompleted values, (or any other open lists of autocompleted values:*/ closeAllLists(); }); a.appendChild(b); } } }); /*execute a function presses a key on the keyboard:*/ inp.addEventListener("keydown", function (e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /*If the arrow DOWN key is pressed, increase the currentFocus variable:*/ currentFocus++; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 38) { //up /*If the arrow UP key is pressed, decrease the currentFocus variable:*/ currentFocus--; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted,*/ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /*a function to classify an item as "active":*/ if (!x) return false; /*start by removing the "active" class on all items:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /*add class "autocomplete-active":*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(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 != inp) { x[i].parentNode.removeChild(x[i]); } } } /*execute a function when someone clicks in the document:*/ document.addEventListener("click", function (e) { closeAllLists(e.target); }); }//end autocomplete_restaurant()