Develop Reference

Mouse hover over button (Auto Hide & Auto Expand)

I have the code for my html button with CSS everything looks fine, just wanted to modify the button code because it should auto hide when user move away cursor from the button and same when it hover over the button should auto expand, basically it should auto expand and auto reduce and dropdown arrow would add value to it.
I already have code little confusion about adding the above points
The Dropdown arrow key to button,
Auto Expand & reduce on mouse cursor movement over the button),
/* 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++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

Use onmouseover and onmouseout.
I guess you would like to keep myDropdown open, when you hover it, so I added the onmouseover/onmouseout effect also there.
And JS code is simple:
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("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++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onmouseover="show()" onmouseout="hide()" class="dropbtn">SURAH</button>
<div onmouseover="show()" onmouseout="hide()" id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

For the hovering part, you can achiveve it with CSS only:
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
Working example:
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

How to attach a div to input value in rendered list?

I need to append a div to the input value in the list so I can add a style class to the div and move the input value text further to the right. This is the only way I can think of to style the input value text. Can this be done? Is there a better way to do it? Here is what I have so far. I am trying to avoid using innerHTML.
Note: If you uncomment the dummy text in the html snippet you will see what I am trying to accomplish.
const todoForm = document.querySelector('.todo-form');
const todoInput = document.querySelector('.todo-input');
const todoItemsList = document.querySelector('.todo-items');
let todos = [];
todoForm.addEventListener('submit', function(e) {
e.preventDefault();
addTodo(todoInput.value);
});
function addTodo(input) {
if (input !== '') {
const todo = {
id: Date.now(),
name: input,
completed: false,
};
todos.push(todo);
renderTodos(todos);
todoInput.value = '';
}
}
function addCheckbox() {
const checkBox = (cb = document.createElement('input'));
cb.type = 'checkbox';
cb.class = 'checkbox';
cb.checked = false;
}
function renderTodos(todos) {
// run through each item inside todos
todos.forEach((item) => {
addCheckbox();
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
const li = document.createElement('li');
// textDiv = document.createElement('div');
// textDiv.class = 'text-container';
li.setAttribute('class', 'item');
li.setAttribute('data-key', item.id);
li.appendChild(cb);
li.append(item.name);
// li.appendChild(textDiv);
li.append(deleteButton);
todoItemsList.append(li);
});
}
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
background: hsl(194, 100%, 70%);
font-family: 'Roboto', sans-serif;
}
button {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid hsl(0, 0%, 0%);
margin: 0 0.3em 0.3em 0;
background: hsl(0, 0%, 0%);
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: hsl(0, 0%, 100%);
text-align: center;
transition: all 0.2s;
}
button:hover {
cursor: pointer;
background-color: hsl(0, 0%, 100%);
color: hsl(214, 11%, 13%);
}
ul {
list-style-type: none;
}
.container {
min-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: hsl(0, 0%, 100%);
font-size: 3rem;
}
/* To Do Form */
.todo-form {
margin: 40px 0px;
}
.todo-input {
width: 250px;
border: none;
outline: none;
border-radius: 5px;
padding: 10px;
margin-right: 10px;
font-size: 1rem;
}
.todo-items {
min-width: 350px;
height: auto;
}
/* Item style */
.item {
height: auto;
background-color: #fff;
margin: 1em;
padding: 10px;
font-size: 1.2rem;
vertical-align: middle;
border-radius: 5px;
}
.checkbox {
width: 1.5em;
height: 1.5em;
margin-right: 20px;
vertical-align: middle;
}
.delete-button {
display: inline-flex;
justify-content: center;
align-items: center;
float: right;
width: 25px;
height: 25px;
background-color: hsl(348, 93%, 56%);
border: none;
outline: none;
/* border-radius: 7px; */
/* padding: 2px 5px; */
/* margin-left: 10px; */
font-size: 0.8rem;
font-weight: 550;
text-align: center;
vertical-align: middle;
}
.delete-button:hover {
background: pink;
}
.checked {
text-decoration: line-through;
}
.text-container {
min-width: 100px;
height: 50px;
background: red;
}
<div class="container">
<h1>To Do</h1>
<form class="todo-form">
<input type="text" class="todo-input" placeholder="add a todo item">
<button type="submit" class="add=button">Add</button>
</form>
<ul class="todo-items">
<!--- dummy item --->
<!--<li class="item" data-key="1594003133171">
<input class="checkbox" type="checkbox">
Get on schedule
<button class="delete-button">x</button>-->
</ul>
</div>

The problem you were encountering was happening because you were trying to set a class name using element.class = 'classname', when the correct syntax is element.classList.add('classname'). I also found some other error and corrected:
because you're always iterating through the array todos, you need to clear the list each time you write to it
the x wasn't showing up in the button so I added it.
const todoForm = document.querySelector('.todo-form');
const todoInput = document.querySelector('.todo-input');
const todoItemsList = document.querySelector('.todo-items');
let todos = [];
todoForm.addEventListener('submit', function(e) {
e.preventDefault();
addTodo(todoInput.value);
});
document.addEventListener('click', e => {
if (e.target.classList.contains('checkbox')) {
if (e.target.checked) e.target.closest('.item').classList.add('checked')
else e.target.closest('.item').classList.remove('checked');
}
})
function addTodo(input) {
if (input !== '') {
const todo = {
id: Date.now(),
name: input,
completed: false,
};
todos.push(todo);
renderTodos(todos);
todoInput.value = '';
}
}
function renderTodos(todos) {
// clear list
todoItemsList.innerHTML = ''
// run through each item inside todos
todos.forEach((item) => {
// checkbox
let cb = document.createElement('input');
cb.type = 'checkbox';
cb.classList.add('checkbox');
cb.checked = false;
// delete button
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
deleteButton.innerText = 'x';
const li = document.createElement('li');
li.classList.add('item');
if (item.completed === true) {
li.classList.add('checked')
cb.checked = true;
}
li.setAttribute('data-key', item.id);
li.appendChild(cb);
li.append(item.name);
li.append(deleteButton);
todoItemsList.append(li);
});
}
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
background: hsl(194, 100%, 70%);
font-family: 'Roboto', sans-serif;
}
button {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid hsl(0, 0%, 0%);
margin: 0 0.3em 0.3em 0;
background: hsl(0, 0%, 0%);
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: hsl(0, 0%, 100%);
text-align: center;
transition: all 0.2s;
}
button:hover {
cursor: pointer;
background-color: hsl(0, 0%, 100%);
color: hsl(214, 11%, 13%);
}
ul {
list-style-type: none;
}
.container {
min-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: hsl(0, 0%, 100%);
font-size: 3rem;
}
/* To Do Form */
.todo-form {
margin: 40px 0px;
}
.todo-input {
width: 250px;
border: none;
outline: none;
border-radius: 5px;
padding: 10px;
margin-right: 10px;
font-size: 1rem;
}
.todo-items {
min-width: 350px;
height: auto;
}
/* Item style */
.item {
height: auto;
background-color: #fff;
margin: 1em;
padding: 10px;
font-size: 1.2rem;
vertical-align: middle;
border-radius: 5px;
}
.checkbox {
width: 1.5em;
height: 1.5em;
margin-right: 20px;
vertical-align: middle;
}
.delete-button {
display: inline-flex;
justify-content: center;
align-items: center;
float: right;
width: 25px;
height: 25px;
background-color: hsl(348, 93%, 56%);
border: none;
outline: none;
/* border-radius: 7px; */
/* padding: 2px 5px; */
/* margin-left: 10px; */
font-size: 0.8rem;
font-weight: 550;
text-align: center;
vertical-align: middle;
}
.delete-button:hover {
background: pink;
}
.checked {
text-decoration: line-through;
}
.text-container {
min-width: 100px;
height: 50px;
background: red;
}
<div class="container">
<h1>To Do</h1>
<form class="todo-form">
<input type="text" class="todo-input" placeholder="add a todo item">
<button type="submit" class="add=button">Add</button>
</form>
<ul class="todo-items"></ul>
</div>
Here's a more concise version, which may or may not be helpful to you
const todoForm = document.querySelector('.todo-form');
const todoInput = document.querySelector('.todo-input');
const todoItemsList = document.querySelector('.todo-items');
let todos = [];
todoForm.addEventListener('submit', function(e) {
e.preventDefault();
if (todoInput.value.trim() ==='') return;
todos.push({id: Date.now(), name: todoInput.value.trim(), completed: false});
todoItemsList.innerHTML = todos.map(todo => `
<li class="item" data-key="${todo.id}">
<input class="checkbox" type="checkbox">
${todo.name}
<button class="delete-button">x</button>
</li>`).join('');
todoInput.value = '';
});
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
background: hsl(194, 100%, 70%);
font-family: 'Roboto', sans-serif;
}
button {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid hsl(0, 0%, 0%);
margin: 0 0.3em 0.3em 0;
background: hsl(0, 0%, 0%);
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: hsl(0, 0%, 100%);
text-align: center;
transition: all 0.2s;
}
button:hover {
cursor: pointer;
background-color: hsl(0, 0%, 100%);
color: hsl(214, 11%, 13%);
}
ul {
list-style-type: none;
}
.container {
min-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: hsl(0, 0%, 100%);
font-size: 3rem;
}
/* To Do Form */
.todo-form {
margin: 40px 0px;
}
.todo-input {
width: 250px;
border: none;
outline: none;
border-radius: 5px;
padding: 10px;
margin-right: 10px;
font-size: 1rem;
}
.todo-items {
min-width: 350px;
height: auto;
}
/* Item style */
.item {
height: auto;
background-color: #fff;
margin: 1em;
padding: 10px;
font-size: 1.2rem;
vertical-align: middle;
border-radius: 5px;
}
.checkbox {
width: 1.5em;
height: 1.5em;
margin-right: 20px;
vertical-align: middle;
}
.delete-button {
display: inline-flex;
justify-content: center;
align-items: center;
float: right;
width: 25px;
height: 25px;
background-color: hsl(348, 93%, 56%);
border: none;
outline: none;
/* border-radius: 7px; */
/* padding: 2px 5px; */
/* margin-left: 10px; */
font-size: 0.8rem;
font-weight: 550;
text-align: center;
vertical-align: middle;
}
.delete-button:hover {
background: pink;
}
.checked {
text-decoration: line-through;
}
.text-container {
min-width: 100px;
height: 50px;
background: red;
}
<div class="container">
<h1>To Do</h1>
<form class="todo-form">
<input type="text" class="todo-input" placeholder="add a todo item">
<button type="submit" class="add=button">Add</button>
</form>
<ul class="todo-items"></ul>
</div>

try this:
function renderTodos(todos) {
//delete all the todos in the DOM
todoItemsList.innerHTML = '';
// insert todos
todos.foreach(todo => {
todoItemsList.insertAdjacentHTML('afterbegin', `
<li class="item" data-key="${todo.id}">
<input class="checkbox" type="checkbox" ${todo.completed ?
checked : ''}>
${todo.name}
<button class="delete-button">x</button>
</li>`)
})
}
first of all, you need to clear all the todos and rerender them,
try this code.

Hamburger menu not opening after click

I made my menu to shrink into hamburguer style on
max-width: 500px;
I added javascript to close it after clicking a link and it works fine, but after the first link has been click, to open it again, tha hamburguer icon doesn't work but you have to click where the menu links are supposed to be (even without displaying).
var nav = 1;
function navMenu() {
if (nav === 1) {
document.getElementById("showmenu").style.opacity = 0;
nav = 0;
} else if (nav === 0) {
document.getElementById("showmenu").style.opacity = 1;
nav = 1;
}
}
.nav {
justify-content: flex-end;
text-align: right;
height: 50px;
line-height: 50px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: calc(12px + .2vw);
width: 100%;
box-sizing: border-box;
}
.menu {
display: block;
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: #828282;
margin: 0 20px;
line-height: 50px;
}
label {
margin: 0 0 0 0;
font-size: 25px;
line-height: 50px;
display: none;
margin: 0 20px;
text-align: right;
}
#toggle {
display: none;
}
#media screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.nav {
margin-right: 0;
}
.menu {
text-align: center;
width: 100%;
display: none;
box-sizing: border-box;
background-color: #000000;
}
.menu a {
display: block;
border-bottom: 1px solid #D736A6;
margin: 0;
}
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu" id="showmenu" onclick="navMenu()">
Home
About
Skills
Work
Contact
</div>
</div>

<div class="menu" id="showmenu" onclick="clickAnyAreaOnMenu();">
Home
About
Skills
Work
Contact
</div>
<script>
function clickAnyAreaOnMenu() {
let toggle = document.getElementById("toggle");
toggle.checked = false;
}
</script>

how to overlap contents of iframe tag

I have made this search bar... And i want to use this page on many pages using iframe tag.
But when i use it and when results are shown, it shifts other elements, or a scroll bar is visible ... I want the result to overlaped on the other contents of the site... So that it is visible normally...
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 {
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;
}
<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>

I still don't get was this what you meant.
<style>
.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;
flex-direction: column;
justify-content: flex-start;
}
.dropdown-content{
max-height: 215px;
display: none;
top: 60px;
left: 0;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
max-width: 70px;
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;}
body{margin: 0;}
.header{
height: 90px;width: 100vw;
display: flex;position: relative;
align-items: center;
justify-content: space-around;
z-index: 10;
}
.dropdown-content::-webkit-scrollbar{
background: transparent;
width: 0;
display: none;
}
.banner{
background-color: #AAA;color: white;
height: 150px;width: 100vw;
top: 90px;left: 0;
display: block;position: absolute;
z-index: 1;
}
</style>
<div class="header">
<div class="dropdown">
<input type="text" class="dropbtn"placeholder="Search Here..." id="myInput" onInput="filterFunction()"/>
<div id="myDropdown" class="dropdown-content">
Result 1 a very long long line one result
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>
<div>Other</div>
</div>
<div class="banner">Banner Content<div>

Don't get it but is it something like top: 60px;left: 0; in .dropdown-content?

How to make a option in search to be always visible

I have made an search bar using html, css and javascript and it is working perfectly but I want the answers to be shown when the user starts typing, not before. And I also want to add one option in it which is always shown whether it matches the result or not.
/* 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++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.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" onclick="myFunction()" 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>

Please try to remove onclick event and code to show dropdown inside onkeyup event.
For better understanding see the attached code snippet.
function filterFunction() {
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 || txtValue.toLowerCase() === 'more') {
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
Cyber Warriors YouTube Channel
More
</div>
</div>
</body>
</html>

Remove onclick from input and add a class "fixed-input" on the value you wanted to be fixed
/* 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>