Develop Reference

My dropdown menu doesn't activate correctly

I am trying to add my dropdown menu to some dynamically created html content using javascript. I have a table that I fill with data based on something returned from a .json file. I want the table data to be filled with my drop-down menu.
The thing is the classes that I add in the Jquery string don't get applied. For example:
infores = afile.json and always returns text
setup.js
//add table rows
if (isMobile.any()) {
//$("#probes").css("column-count: 2");
activ_col_count = small_col_count;
num_probe_rows = Math.ceil(infores.outputs.length / small_col_count) * 2;
for (let i = 0; i < num_probe_rows; i++) {
;
$("#probes").append(`<tr></tr>`)
}
} else {
//$("#probes").css("column-count: 13");
activ_col_count = big_col_count;
num_probe_rows = Math.ceil(infores.outputs.length / big_col_count) * 2;
for (let i = 0; i < num_probe_rows; i++) {
;
$("#probes").append("<tr></tr>")
}
}
let table_rows = document.getElementById('probes').children;
//fills rows with correct number of data
for (let i = 0; i < num_probe_rows; i = i + 2) {
for (let j = 0; j < activ_col_count; j++) {
if (i == num_probe_rows - 2 && j == infores.outputs.length % activ_col_count) {
break;
}
table_rows[i].innerHTML += `
<td>
<h2> <div class="dropdown">
<button onclick="showDropdown()" class="dropbtn">${(infores.outputs[i+j].isenabled)?(infores.outputs[i+j].isrunning?"Running":"Enabled"):"Disabled"}</button>
<div id="myDropdown" class="dropdown-content" ${drop_show?"":"hidden"}>
<p>Running</p>
<p>Enabled</p>
<p>Disabled</p>
</div>
</div>
</h2>
${infores.outputs[i+j].name}
</td>
`;
table_rows[i + 1].innerHTML += `<td>${infores.outputs[i+j].settemp}</td>`;
}
}
I keep a boolean named drop_show.
I also have these events:
function showDropdown() {
drop_show = !drop_show;
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (let i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
drop_show = false;
}
}
}
CSS
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content p{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content p:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
html
<table class="settings" id="probes">
</table>
The paragraphs just show all the time and are not affected at all by clicking.
I feel like I'm doing things wrong here lol please help

Not able to enter values in second textbox

I have created a searchbox and I have made it absolute and added one more text box on the bottom , I am unable to click and enter the value in the text box.
Note: Position must be the same, Click for the Second Text box is not working
Here is the jsFiddle Link
Here is the code snippet
var placeArr = ["Adele","Agnes","Billy","Bob","Calvin","Christina","Cindy"];
function myFunction() {
let input, filter, ul, li, liElem, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
liElem = li[i];
txtValue = liElem.textContent || liElem.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="block";
}
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="none";
}
}
var selectPlace = function(ids){
document.getElementById("myInput").value=document.getElementById(ids).innerHTML;
hideDiv();
}
var generateList = function(array, eventfn){
let cnt=0;
array.forEach(function(item){
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode(item); // Create a text node
node.appendChild(textnode);
node.setAttribute("id", "myLi"+(cnt++));
node.addEventListener("click", ()=>{eventfn(node.getAttribute("id"))});
document.getElementById("myUL").appendChild(node);
});
};
generateList(placeArr,selectPlace);
* {
box-sizing: border-box;
}
#myInput,.myInput {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 10px;
border: 1px solid #ddd;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width:50%;
height:200px;
overflow-y:auto;
position:absolute;
}
#myUL li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: none;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<h2>My Phonebook</h2>
<div>
<input type="text" id="myInput" class="myInput" onkeyup="myFunction()" onclick=showDiv() placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
</ul>
</div>
<br/>
<div>
<input type="text" class="myInput">
</div>
I have added the Image

Currently, your ul tag is overriding the div underneath. So for:
<div style="z-index: 1; position: relative;">
<input type="text" class="myInput">
</div>
just add the z-index and position to have it on top. You will have to add in a style to the ul tag though onclick to override it when it is in use.
.override{
z-index: 10;
position: relative;
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="block";
}
li = document.getElementById('myUL'); // added this line
li.classList.add("override"); // added this line
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="none";
}
li = document.getElementById('myUL'); // added this line
li.classList.remove("override"); // added this line
}
https://jsfiddle.net/tgq65jas/

The second text box is being obscured by the myUL element. In the hideDiv function, each of the li elements have their display set to none, but myUL is still there.
Rather than setting display: none for each li, set display: none on the entire ul.

Close list of Dropdown Menu

I have this dropdown menu:
document.addEventListener("DOMContentLoaded", function(event) {
allNameMuseums().forEach(function(item) { // ITERAZIONE
document.getElementById("myDropdown").innerHTML += '<a onclick="updateData(this)">' + item + '</a>';
})
});
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Museo1</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
</div>
</div>
I want that when I click an item in the list of dropdown menu, the list closes automatically.

What are you need is remove the "show" class from the element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }
.dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; }
#myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; }
#myInput:focus { outline: 3px solid #ddd; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown a:hover { background-color: #ddd; }
.show { display: block; }
</style>
</head>
<body>
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu [...]</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Item1
Item2
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function select() {
//Your item selection logic here...
myFunction();
}
</script>
</body>
</html>

Follow the example in W3C School here:
What you are missing is, closing the dropdown when the click is outside the button:
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Try yourself
And notice, this example doesn't have your search bar, so in this function, you'll have to check with the search bar as well to exclude it from closing the drop down.

Search / Filter Dropdown: Change value variable when click

I just implemented a Search / Filter Dropdown, following this guide: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter.
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
</div>
</div>
This Search / Filter Dropdown takes the array of the allNameMuseums () method as values, ie ["ACQUARIUM", "Museo2", "Museo3"].
document.addEventListener("DOMContentLoaded", function(event) {
allNameMuseums().forEach(function(item) {
document.getElementById("myDropdown").innerHTML += '' + item + '';
})
});
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function allNameMuseums() {
return ["ACQUARIO", "Museo2", "Museo3"];
}
I have two asynchronous methods, specificoMuseo(name) and allMuseums (), and a variable var data = proof; that takes the result of the allMuseums() method.
specificoMuseo(name).then(proof2 => {
allMuseums().then(proof => {
var data = proof;
});
});
I want that when I click on ACQUARIO of Search / Filter Dropdown the variable 'data' takes as input the result of specificoMuseo ("ACQUARIO").

You need to similar logic as below,
var name; //globle variable so you can access in your method
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function fnclick(obj) {
name = obj.innerHTML;
alert(name);
console.log(name);
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
</div>
</div>

Make dropdown visible only when function is called

I am trying make the drop-down visible only when something is entered in the search bar.Otherwise it stays collapsed. Following is my code
function mysearchFunction() {
var input, upperCase, ul, li, x, i, ax;
input = document.getElementById("mysearchInput");
upperCase = input.value.toUpperCase();
ul = document.getElementById("myList");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
x = li[i].getElementsByTagName("a")[0];
if (x.innerHTML.toUpperCase().indexOf(upperCase) === 0) {
li[i].style.visibility = "visible";
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
#myList li a {
border: 1px solid #ddd;
margin-top: -2px;
background-color: #f6f6f6;
padding: 10px;
text-decoration: none;
font-size: 16px;
color: black;
display: block;
visibility: collapse;
}
<input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search..">
<ul id="myList">
<li>America</li>
<li>Africa</li>
<li>Antartica</li>
<li>Asia</li>
<li>Europe</li>
<li>Australia</li>
</ul>
In the JS, I am trying to make only content that needs to be displayed as visible. Kindly guide me where I am going wrong. No content is currently being displayed. It is staying collapsed.

Just updated the css selector: #myList li, you were hiding all the links.
function mysearchFunction() {
var input, upperCase, ul, li, x, i, ax;
input = document.getElementById("mysearchInput");
upperCase = input.value.toUpperCase();
//console.log(upperCase);
ul = document.getElementById("myList");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
x = li[i].getElementsByTagName("a")[0];
if (x.innerHTML.toUpperCase().indexOf(upperCase) == 0 && upperCase !== '') {
li[i].style.visibility = "visible";
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
#myList li {
border: 1px solid #ddd;
margin-top: -2px;
background-color: #f6f6f6;
padding: 10px;
text-decoration: none;
font-size: 16px;
color: black;
display: block;
visibility: collapse;
}
<input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search..">
<ul id="myList">
<li>America</li>
<li>Africa</li>
<li>Antartica</li>
<li>Asia</li>
<li>Europe</li>
<li>Australia</li>
</ul>