Develop Reference

Span tag braking button action

I have a simple dropdown menu on a page. Clicking it triggers a JavaScript function. Code here:
function myBrandDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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");
}
}
}
};
.dropbtn {
background-color: transparent;
padding: 10px;
font-size: 1.4rem;
border: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
}
/* Dropdown button on hover*/
.dropbtn:hover {
border: none;
text-decoration: none;
}
/* Dropdown button on focus */
.dropbtn:focus {
background-color: #293241;
border: none;
text-decoration: none;
color: #fff;
}
/* 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: #293241;
min-width: 160px;
color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a: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;
}
<div class="dropdown">
<button onclick="myBrandDropdown()" class="dropbtn">
Brand name ▾
</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Up to this point everything works fine.
However I wanted to add some underline styling to the text within the button, but with more control than a simple underline text decoration. So I wrapped the text in a span, and gave that the style I wanted. See here:
Updated HTML
<div class="dropdown">
<button onclick="myBrandDropdown()" class="dropbtn">
<span class="dropbtnunderline">Brand name</span>
▾
</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
New CSS
.dropbtnunderline {
display: inline-block;
border-bottom: 3px solid #e63946;
padding-bottom: 2px;
padding-top: 5px;
}
Since adding the span, the button no longer triggers correctly. It looks exactly as I wanted, and clicking the space around the text triggers correctly, but clicking on the text itself does nothing.
What is it that's caused this, and can I easily fix it?

The simplest possible solution would be to add pointer-events: none as a style to the span.

Datalist make second row searchable

I am using a datalist to select a city . I want the first row of the datalist to show the selected city and from the second row I need the search functionality. Currently, the first row is a search row. I want something like this
This is my JsFiddle code
<label class="item">City:</label><input list="cities_list" id = "s_city" name = "s_city" placeholder="search..." type="text" onblur ="setCityName();" class="item">
<datalist id="cities_list" class="item">
<option value="Puerto Rico" date-time-zone="America/Puerto_Rico">
<option value="Chicago" date-time-zone="America/Chicago">
<option value="Antigua" date-time-zone="America/Antigua">
<option value="Amsterdam" date-time-zone="Europe/Amsterdam">
<option value="Istanbul" date-time-zone="Europe/Istanbul">
<option value="London" date-time-zone="Europe/London">
<option value="Rome" date-time-zone="Europe/Rome">
<option value="Bangkok" date-time-zone="Asia/Bangkok">
<option value="Hong_Kong" date-time-zone="Asia/Hong_Kong">
<option value="Jakarta" date-time-zone="Asia/Jakarta">
</datalist>
Is there any Javascript or jQuery function I can use to change the behaviour of the datalist. The first row shows the selected city and the second row will be the searchable. Any suggestions would be appreciated.

Here is an approach without plugin.
function openSearchDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function closeSearchDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function selectFilteredValue() {
document.getElementById("search_input").value = event.target.getAttribute("data-value");
closeSearchDropdown();
}
function filterSearchDropdown() {
var input, filter, ul, li, span, i;
input = document.getElementById("search_value");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
span = div.getElementsByTagName("span");
for (i = 0; i < span.length; i++) {
txtValue = span[i].textContent || span[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
span[i].style.display = "";
} else {
span[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;
}
.dropdown .search-area {
box-sizing: border-box;
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;
}
.dropdown .search-area: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 span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown span:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h2>City</h2>
<div class="dropdown">
<input onclick="openSearchDropdown()" id="search_input" />
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="search_value" onkeyup="filterSearchDropdown()" class="search-area" />
<span data-value="Bangkok" onclick="selectFilteredValue()">Bangkok</span>
<span data-value="Hong_Kong" onclick="selectFilteredValue()">Hong_Kong</span>
<span data-value="Jakarta" onclick="selectFilteredValue()">Jakarta</span>
</div>
</div>
</body>
</html>

How to make the search bar in your website searching for products and showing the thing you searching about

I want to know how to make my search bar on my blog website working like amazon or any website have a search bar when you type a letter it shows you things related to the letter you searched for and the things that I mean it is something like a blog or product

Here you go with vanilla JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myInput {
box-sizing: border-box;
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 {
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content li, h4 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown li:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Search/Filter Dropdown</h2>
<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<h4>My List</h4>
<ul>
<li id="product1">Car</li>
<li id="product2">Bicyle</li>
<li id="product3">Motocycle</li>
<li id="product4">Boat</li>
<li id="product5">Lawn Mower</li>
<li id="product6">Trailer</li>
<li id="product7">Power Saw</li>
</ul>
</div>
</div>
<script>
/* Javascript function to search the list*/
function filterFunction() {
let input, filter, ul, li, a, i;
input = document.getElementById("myInput");
/* change everything to lower or upper case in order
to make the search case insensitive */
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
li = div.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
txtValue = li[i].textContent || li[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

How to set the value from the drop down as the default value in the box?

I want the set default value of the select to month. Moreover on load select should show month as text instead of Filter.
How can it be achieved???
any help would do good.
Below is the snippet of the code I have written so far.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
position: relative;
margin: 0 20px;
color: white;
padding: 3px 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Filter </button>
<div id="myDropdown" class="dropdown-content">
Day
Week
Month
</div>
Please let me know how i can achieve this

Try this. You can apply click event on the links and when clicked the value of filter can be set
$(document).ready(function(){
$(".dropbtn").html($(".default").text())
})
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
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');
}
}
}
}
$("#myDropdown").children('a').click(function(){
$('.dropbtn').html($(this).text())
})
.dropbtn {
background-color: #3498DB;
position: relative;
margin: 0 20px;
color: white;
padding: 3px 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Filter </button>
<div id="myDropdown" class="dropdown-content">
Day
Week
Month
</div>

HTML5 makes this more easier by using the select tag.
The selected option will specify which option has to be selected by default when the page loads.
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month" selected >Month</option>
<select>

Instead of that div class you've got. Create a dropdown such as the following.
<select>
<option value="Day">Day</option>
<!--etc-->
</select>
To make a default using this you can simply add the following
<option value="Day" selected="selected">Day</option>

Dropdown List is not getting the CSS in asp.net

I am trying to make a DROPDOWN list from this tutorial. The functions seem to work very good, but it doesnt get the CSS.
this is what it looks.
Since the refreshes the page when its pressed. I tried to add it as a but still the same problem, the CSS does not get implemented.
any suggestion?
this is the snipped code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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";
}
}
}
.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;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
<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
Contact
Custom
Support
Tools
</div>
</div>
Whats the problem here? I cant figure it out.

Maybe problem of css in separate file, that in line
.dropdown a:hover
after background-color property value missing semicolon?