Dropdown won't close when clicking outside button/dropdown

Dropdown won't close when clicking outside button/dropdown - javascript

So I am having a little problem. If you look at the code snippet the dropdown is working a little different on the snippet than on my website. On my website you can search and everything works as it should. However when you have opened the dropdown and then click outside I want it to close, but it doesn't. I think it have something to do with the script. Would appreciate help.
function myFunction() {
var dropDown = document.getElementById('myDropdown'),
items = dropDown.children,
height = 0;
dropDown.classList.toggle('show');
for (var i = 1; i < 10; i++) {
height += items[i].offsetHeight;
}
dropDown.style.height = height + 'px';
}
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";
}
}
}
var btn = document.querySelector('.dropbtn');
btn.addEventListener('blur', function() {
var dd = document.querySelector('.dropdown-content');
if ( dd.classList.contains('show') ) {
dd.classList.remove('show');
}
});
.dropbtn {
background-color: #0d0d0d;
color: white;
padding: 18px;
height: 65px;
width: 125px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: white;
color: black;
}
#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);
z-index: 1;
font-family: 'Lato', serif;
}
.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">CARS</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Acura
Alfa Romeo
Aston Martin
Audi
Bentley
BMW
Bugatti
Buick
Cadillac
Chevrolet
Chrysler
Dodge
Ferrari
Fiat
Ford
Gensis
GMC
Honda
Hyundai
Infiniti
Jaguar
Jeep
Kia
Koenigsegg
Lamborghini
Land Rover
Lexus
Lincoln
Lotus
Maserati
Mazda
McLaren
Mercedes-AMG
Mercedes-Benz
Mercedes-Maybach
Mini
Mitsubishi
Nissan
Pagani
Porsche
Ram
Rolls-Royce
Scion
Smart
Spyker
Subaru
Tesla
Toyota
Volkswagen
Volvo
</div>
</div>

Try something like this, with a document event listener for click, and e.stopPropagation() on any menu elements.
Also, why do you have two hrefs for each link?
function myFunction() {
var dropDown = document.getElementById('myDropdown'),
items = dropDown.children,
height = 0;
dropDown.classList.toggle('show');
for (var i = 1; i < 10; i++) {
height += items[i].offsetHeight;
}
dropDown.style.height = height + 'px';
}
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";
}
}
}
var menu = document.querySelector('.dropdown');
menu.addEventListener('click', function(event) {
event.stopPropagation();
});
document.addEventListener('click', function() {
var dd = document.querySelector('.dropdown-content');
if (dd.classList.contains('show')) {
dd.classList.remove('show');
}
})
.dropbtn {
background-color: #0d0d0d;
color: white;
padding: 18px;
height: 65px;
width: 125px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: white;
color: black;
}
#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);
z-index: 1;
font-family: 'Lato', serif;
}
.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">CARS</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Acura
Alfa Romeo
Aston Martin
Audi
Bentley
BMW
Bugatti
Buick
Cadillac
Chevrolet
Chrysler
Dodge
Ferrari
Fiat
Ford
Gensis
GMC
Honda
Hyundai
Infiniti
Jaguar
Jeep
Kia
Koenigsegg
Lamborghini
Land Rover
Lexus
Lincoln
Lotus
Maserati
Mazda
McLaren
Mercedes-AMG
Mercedes-Benz
Mercedes-Maybach
Mini
Mitsubishi
Nissan
Pagani
Porsche
Ram
Rolls-Royce
Scion
Smart
Spyker
Subaru
Tesla
Toyota
Volkswagen
Volvo
</div>
</div>

Related

Assistance With Organizing User Input Inside Of Border JS

I am currently creating a To Do list program using HTML, CSS, and JS. One of my current issues with my program is that the item added to the list partially blocks the add button inside of my program when you choose to run it. And another issue is that the clear button isn't function properly when you enter clear to remove all of the added items. So I am wondering how to resolve these issues where the added items are partially blocking the add and clear button. And how to get the clear button to function properly to clear the list of added items inside of the to do list.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
#todo{
float:left;
width:50%;
}
#done{
float:right;
width:50%;
}
/* Include the padding and border in an element's total width and height */
//* {
// box-sizing: border-box;
//}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.Clear {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.Clear:hover {
background-color: #bbb;
}
.addBtn:hover {
background-color: #bbb;
}
h1 {
font-size: 30px;
border: 1px solid black;
margin: auto;
padding: 30px;
text-align: center;
}
h2 {
font-size: 30px;
border: 1px solid black;
margin: auto;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<form id="todo" style="float:left">
<h1 id="todo" style="font-family:Helvetica; color:#006600"><b>To Do</b>
<input type="text" id="myInput" placeholder="Add Item">
<span onclick="newElement()" class="addBtn">Add</span>
<input type="button" onclick="newFunction()" value="Clear">
<ul id="myUL">
</ul>
</h1>
</form>
<form id="done" style="float:right">
<h2 id="done" style="font-family:Helvetica; color:#006600"><b>Done</b></h2>
</form>
<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
function newFunction() {
document.getElementById("todo").reset();
}
</script>
</body>
</html>

It is the position: absolute in the css.
When you use this property, elements will "float" through page.
You should remove all properties with absolute.
There is no need to use them in your page.
I also recommend these two articles about position and flexbox:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/css3_flexbox.asp

Make search box to give same output for input as "abc123" or "abc 123"

This is an drop down search box which is working perfectly.....
But i want that, as it contains a option of Contact us, so if anyone searches for contact us like "contactus" or "contact us". In both the case it shows the same result...
Means, searching abc123 or searching for abc 123 gives same result.
I dont want to add 2 options for this.
Pls help!
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function hideOptions() {
document.getElementById("myDropdown").classList.remove("show");
}
function showOptions() {
hideOptions();
document.getElementById("myDropdown").classList.add("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
if( input.value === ''){
hideOptions();
return false;
}
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else if(a[i].classList.contains('fixed-input') === true) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
showOptions();
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border: 5px solid #ddd;
}
#myInput:focus {
outline: 7px 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;
}
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
Cyber Warriors YouTube Channel
</div>
</div>

One idea is to use the startsWith method.
I changed the following line: if (txtValue.toUpperCase().indexOf(filter) > -1)
by: if (txtValue.toUpperCase().startsWith(filter) || filter.startsWith(txtValue.toUpperCase()))
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function hideOptions() {
document.getElementById("myDropdown").classList.remove("show");
}
function showOptions() {
hideOptions();
document.getElementById("myDropdown").classList.add("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
if( input.value === ''){
hideOptions();
return false;
}
filter = input.value.toUpperCase()
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().startsWith(filter) || filter.startsWith(txtValue.toUpperCase())) {
a[i].style.display = "";
} else if(a[i].classList.contains('fixed-input') === true) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
showOptions();
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.div {
display: none;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border: 5px solid #ddd;
}
#myInput:focus {
outline: 7px 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;
}
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
Cyber Warriors YouTube Channel
</div>
</div>

Can use REGEX to achieve this
input = document.getElementById('myInput')
text=input.value // text = 'example one'
text = text.replace(/\s+/g,'') // text = 'exampleone'

Make only 5 results to be visible in a search bar at a time

I have an search bar which is working perfectly.
But getting an issue. I want only 5 results to be vsible at a time and other results should be seen by sliding from the slider.
For example if it contains 10 results. Then is shoould show ony 5 on searching and to see other user can sllide from the slidebar....
here is my code
function filterFunction() {
let isInputAvail = false;
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toLowerCase();
if (filter.length > 0) {
document.getElementById("myDropdown").classList.add("show");
} else {
document.getElementById("myDropdown").classList.remove("show");
}
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) {
isInputAvail = true;
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if (!isInputAvail) {
document.getElementById("noMatches").classList.add('show');
} else {
document.getElementById("noMatches").classList.remove('show');
}
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 25px;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: 5px solid #ddd;
border-radius: 25px;
}
#myInput:focus {
outline: 4px solid #f2f2f2;
border-color: #171313;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: none;
z-index: 1;
border-radius: 25px;
}
.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">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div id="noMatches" class="dropdown-content">
No Matches
</div>
</div>
Here i want that when i write result then all the matching result is shown but that show a huge list. I want to make it to show ony 5 result and there should be a slidebar at right side from which on sliding other results can be seen.
Hope you got my point.
Thanks in advance.

Check out this snippet:
function filterFunction() {
let isInputAvail = false;
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toLowerCase();
if (filter.length > 0) {
document.getElementById("myDropdown").classList.add("show");
} else {
document.getElementById("myDropdown").classList.remove("show");
}
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) {
isInputAvail = true;
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if (!isInputAvail) {
document.getElementById("noMatches").classList.add('show');
} else {
document.getElementById("noMatches").classList.remove('show');
}
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 25px;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: 5px solid #ddd;
border-radius: 25px;
}
#myInput:focus {
outline: 4px solid #f2f2f2;
border-color: #171313;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
max-height: 215px;
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 25px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div id="noMatches" class="dropdown-content">
No Matches
</div>
</div>
</body>
</html>
I have limited maximum height of .dropdown-content using max-height property and set vertical overflow to scroll using overflow-y: scroll;. Removed overflow: auto from .dropdown-content.

Don't use IDs, programming should be writing reusable code.
To show the dropdowns or to switch the list/no-matches, use two classes on the parent element ("hasvalue" and "nomatch"), the rest is all pure CSS and the :focus selector
Use CSS max-height to limit the height of your overflow element
UI/UX tip: half-cut the last list word, to additionally give the user a clue that there's more items in the scrollable element.
function dropdown(EL) {
const EL_input = EL.querySelector(".dropdown-input");
const ELS_li = EL.querySelectorAll(".dropdown-box--list a");
const filter = () => {
const val = EL_input.value.trim().toLowerCase();
const fil = [...ELS_li].filter(el => {
const match = el.textContent.trim().toLowerCase().includes(val);
el.classList.toggle("hide", !match);
return match;
});
EL.classList.toggle("hasvalue", val.length);
EL.classList.toggle("nomatch", val.length && !fil.length);
};
EL_input.addEventListener("input", filter);
EL_input.addEventListener("focus", filter);
ELS_li.forEach(el => el.addEventListener("mousedown", () => {
EL_input.value = el.textContent.trim()
}));
}
document.querySelectorAll(".dropdown").forEach(el => dropdown(el));
/* QuickReset */ * {margin: 0; box-sizing: border-box;}
/* DROPDOWN COMPONENT */
.dropdown {
--item-height: 30px;
--visible: 5;
font-family: sans-serif;
position: relative;
display: inline-block;
}
.dropdown-input {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
font-size: 16px;
padding: 15px 20px;
border: 5px solid #ddd;
border-radius: 25px;
background: #fff;
}
.dropdown-input:focus {
outline: none;
border-color: #000;
}
.dropdown.hasvalue .dropdown-input:focus {
border-bottom: 1px solid #ddd;
border-radius: 25px 25px 0 0;
}
.dropdown-box {
display: none;
position: absolute;
top: 100%;
z-index: 1;
min-width: 100%;
overflow: auto;
border-radius: 0 0 10px 10px;
max-height: calc(var(--item-height) * var(--visible));
border: 5px solid #000;
border-top: 0;
}
.dropdown.hasvalue .dropdown-input:focus~.dropdown-box--list {
display: block;
}
.dropdown.nomatch .dropdown-input:focus~.dropdown-box--list {
display: none;
}
.dropdown.nomatch .dropdown-input:focus~.dropdown-box--nomatch {
display: block !important;
}
.dropdown-box a {
display: flex;
align-items: center;
padding: 7px 20px;
min-height: var(--item-height);
color: black;
text-decoration: none;
transition: background 0.24s;
}
.dropdown-box a.hide {
display: none;
}
.dropdown-box a:hover {
background-color: #acf;
}
.dropdown-box::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.dropdown-box::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
.dropdown-box::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 10px;
}
<div class="dropdown">
<input type="text" class="dropdown-input" autocomplete="off" placeholder="🔍︎ Search...">
<div class="dropdown-box dropdown-box--list">
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div class="dropdown-box dropdown-box--nomatch">
<i>No Matches</i>
</div>
</div>
<div class="dropdown">
<input type="text" class="dropdown-input" autocomplete="off" placeholder="🔍︎ Yet another...">
<div class="dropdown-box dropdown-box--list">
Lorem
Ipsum
Dolor sit amet
Lorem ut florem
</div>
<div class="dropdown-box dropdown-box--nomatch">
<i>No Matches</i>
</div>
</div>

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?

Building / Populating a Drop Down Menu on Web Page from Google Spreadsheet Data

I'm using a Google visualization query to pull column headings from this spreadsheet. Currently I must include the row and column indexes for each cell I want in the menu. What I'd like is a script that'll populate this menu dynamically with data from the cells in row 1 of the spreadsheet. In other words, make the menu as big or as small as what exists on the spreadsheet.
I believe I need something like the following, but I'm unsure how to implement it. Perhaps I need server side script (GAS) to accomplish this??
<select>
for (var i = 0; i < data.length; ++i) {
<option>!= data[i] </option>
}
</select>
I've found plenty of documentation to accomplish this using Google's HTMLService, but I need this menu to be hosted using a different service.
Any help would be greatly appreciated. Thanks!
My current code follows...
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(ValIDS);
function ValIDS() {
var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');
queryValIDS.send(handleQueryValIDResponse);
}
function handleQueryValIDResponse(response) {
if (response.isError()) {
alert('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var datatable = response.getDataTable();
var cat1 = datatable.getValue(0,0);
var cat2 = datatable.getValue(0,1);
var cat3 = datatable.getValue(0,2);
var cat4 = datatable.getValue(0,3);
var cat5 = datatable.getValue(0,4);
var cat6 = datatable.getValue(0,5);
var cat7 = datatable.getValue(0,6);
var cat8 = datatable.getValue(0,7);
var cat9 = datatable.getValue(0,8);
var cat10 = datatable.getValue(0,9);
document.getElementById('cat1').innerHTML = cat1;
document.getElementById('cat2').innerHTML = cat2;
document.getElementById('cat3').innerHTML = cat3;
document.getElementById('cat4').innerHTML = cat4;
document.getElementById('cat5').innerHTML = cat5;
document.getElementById('cat6').innerHTML = cat6;
document.getElementById('cat7').innerHTML = cat7;
document.getElementById('cat8').innerHTML = cat8;
document.getElementById('cat9').innerHTML = cat9;
document.getElementById('cat10').innerHTML = cat10;
}
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: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: #f1f1f1}
.show {display:block;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: #f1f1f1}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<div id="cat1"></div>
<div id="cat2"></div>
<div id="cat3"></div>
<div id="cat4"></div>
<div id="cat5"></div>
<div id="cat6"></div>
<div id="cat7"></div>
<div id="cat8"></div>
<div id="cat9"></div>
<div id="cat10"></div>
</div>
</div>

you can use client-side JavaScript to build the drop-down dynamically
using the data from the datatable
there are a number of ways, but this should accomplish what you need
you can use getNumberOfColumns rather than hard-coding each drop-down item
this will allow additional columns to be added to the spreadsheet,
without having to change the code / html
for (var i = 0; i < datatable.getNumberOfColumns(); i++) {
var ddItem = document.getElementById('myDropdown').appendChild(document.createElement('A'));
ddItem.href = '#';
var ddItemContent = ddItem.appendChild(document.createElement('SPAN'));
ddItemContent.id = 'cat' + (i + 1);
ddItemContent.innerHTML = datatable.getValue(0, i);
}
(i + 1) was used on the id above,
just so the id would be the same as what you had hard-coded
since anchors (<a>) are inline elements,
a <span> was used instead of <div>
you may not even need id, or the SPAN for that matter,
since the drop-down items are being created dynamically
see following working snippet...
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(ValIDS);
function ValIDS() {
var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');
queryValIDS.send(handleQueryValIDResponse);
}
function handleQueryValIDResponse(response) {
if (response.isError()) {
alert('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var datatable = response.getDataTable();
for (var i = 0; i < datatable.getNumberOfColumns(); i++) {
var ddItem = document.getElementById('myDropdown').appendChild(document.createElement('A'));
ddItem.href = '#';
var ddItemContent = ddItem.appendChild(document.createElement('SPAN'));
ddItemContent.id = 'cat' + (i + 1);
ddItemContent.innerHTML = datatable.getValue(0, i);
}
}
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: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: #f1f1f1}
.show {display:block;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: #f1f1f1}
.show {display:block;}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content"></div>
</div>
EDIT
the getValue method takes two arguments
getValue(rowIndex, columnIndex)
both rowIndex and columnIndex are zero-based,
meaning the first cell value would be getValue(0, 0)
if you want to pull values from the first column of each row...
use i as rowIndex and 0 as columnIndex
for (var i = 0; i < datatable.getNumberOfRows(); i++) {
var test = datatable.getValue(i, 0);
}

Develop Reference

JavaScript is the programming language of the Web.

Dropdown won't close when clicking outside button/dropdown - javascript

Related

Assistance With Organizing User Input Inside Of Border JS

Make search box to give same output for input as "abc123" or "abc 123"

Make only 5 results to be visible in a search bar at a time

Dropdown List is not getting the CSS in asp.net

Building / Populating a Drop Down Menu on Web Page from Google Spreadsheet Data

Categories

Resources