Issue
I have some code for a dropdown with search, with 3 options. I want when an option is clicked, a div that was previously hidden, to show. I would also like for when an option from the drop-down is clicked, for that to be the selection that appears in the textbox and the drop-down to hide. I don't know why my current code isn't working. I have implemented the function showDiv(), but it's not working and I can't figure out why!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Dropdown Menu with Search</title>
<style>
/* Basic styling for the dropdown */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-label {
font-weight: bold;
padding: 10px;
}
.dropdown-content {
display: block; /* Display the content by default */
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 200px;
border-radius: 5px; /* Rounded corners for the dropdown content */
}
.dropdown-content a {
display: none;
padding: 10px;
text-decoration: none;
color: #333;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Styling for the search input */
.search-input-container {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.search-input {
width: 100%;
padding: 8px;
border: none;
border-radius: 20px; /* Rounded corners for the search input */
outline: none;
}
/* Style for the div that appears */
.hidden-div {
display: none;
margin-top: 10px;
padding: 20px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="dropdown-label">Fruit</div>
<div class="dropdown-content">
<div class="search-input-container">
<input type="text" class="search-input" placeholder="Search...">
</div>
<div id="dropdown">
<a href="#" id="a" onclick="showDiv()">Apple</a>
<a href="#" id="b">Banana</a>
<a href="#" id="c">Orange</a>
</div>
</div>
</div>
<div class="hidden-div" id="myDiv">
<p>You selected: <span id="selectedOption"></span></p>
</div>
<script>
// JavaScript to show/hide dropdown content
const dropdownLabel = document.querySelector('.dropdown-label');
const dropdownContent = document.querySelector('.dropdown-content');
dropdownLabel.addEventListener('click', function () {
dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
});
// JavaScript for filtering items
const searchInput = document.querySelector('.search-input');
const links = document.querySelectorAll('.dropdown-content a');
searchInput.addEventListener('input', function () {
const searchText = searchInput.value.toLowerCase();
links.forEach(function (link) {
const itemText = link.textContent.toLowerCase();
if (itemText.includes(searchText)) {
link.style.display = 'block';
} else {
link.style.display = 'none';
}
});
});
links.forEach(function (link) {
link.addEventListener('click', function () {
selectedFruit.textContent = `Selected Fruit: ${link.textContent}`;
toggleDropdown();
});
});
function showDiv() {
document.getElementById('a').style.display = "block";
}
</script>
</body>
</html>
Solution
Here's a modified version of your script that should work for your requirements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Dropdown Menu with Search</title>
<style>
/* Basic styling for the dropdown */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-label {
font-weight: bold;
padding: 10px;
}
.dropdown-content {
display: block; /* Display the content by default */
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 200px;
border-radius: 5px; /* Rounded corners for the dropdown content */
}
.dropdown-content a {
display: none;
padding: 10px;
text-decoration: none;
color: #333;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Styling for the search input */
.search-input-container {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.search-input {
width: 100%;
padding: 8px;
border: none;
border-radius: 20px; /* Rounded corners for the search input */
outline: none;
}
/* Style for the div that appears */
.hidden-div {
display: none;
margin-top: 10px;
padding: 20px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="dropdown-label">Fruit</div>
<div class="dropdown-content">
<div class="search-input-container">
<input type="text" class="search-input" placeholder="Search...">
</div>
<div id="dropdown">
<a href="#" id="a" onclick="showDiv()">Apple</a>
<a href="#" id="b">Banana</a>
<a href="#" id="c">Orange</a>
</div>
</div>
</div>
<div class="hidden-div" id="myDiv">
<p>You selected: <span id="selectedOption"></span></p>
</div>
<script>
// JavaScript to toggle dropdown content
const dropdownLabel = document.querySelector('.dropdown-label');
const dropdownContent = document.querySelector('.dropdown-content');
const hiddenDiv = document.getElementById('myDiv');
const searchInput = document.querySelector('.search-input');
const selectedOption = document.getElementById('selectedOption');
dropdownLabel.addEventListener('click', function () {
// Toggle dropdown display
dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
});
// JavaScript for filtering items
const links = document.querySelectorAll('.dropdown-content a');
searchInput.addEventListener('input', function () {
const searchText = searchInput.value.toLowerCase();
links.forEach(function (link) {
const itemText = link.textContent.toLowerCase();
if (itemText.includes(searchText)) {
link.style.display = 'block';
} else {
link.style.display = 'none';
}
});
});
links.forEach(function (link) {
link.addEventListener('click', function () {
// Set the text of the search input to the text of the clicked link
searchInput.value = link.textContent;
// Update the selectedOption text
selectedOption.textContent = link.textContent;
// Hide the dropdown content
dropdownContent.style.display = 'none';
// Show the hidden div
hiddenDiv.style.display = 'block';
});
});
</script>
</body>
</html>
Answered By - Isha Padalia
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.