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.
Related
I have a list of items in a drop down which is filterable using a search within the dropdown.
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Please select</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Abyssinian
American Bobtail
Amercian Curl
</div>
</div>
And the js...
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";
}
}
}
https://codepen.io/RSA_James/pen/LYZqYym
What I'm after is a way of showing a message if a user starts searching for something and there's no matches.
Any help appreciated! Thanks
ES6 shrinks the code a bit:
function filterFunction(sText) {
[...document.querySelectorAll('#myDropdown a')].forEach(elA => elA.classList.toggle('hide', !new RegExp(sText, 'gi').test(elA.textContent)));
document.querySelector('#myDropdown span.err').classList.toggle('hide', document.querySelectorAll('#myDropdown a:not(.hide)').length);
}
.hide { display: none; } .err { color: red; }
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Please select</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" oninput="filterFunction(this.value)">
Abyssinian
American Bobtail
Amercian Curl
<span class="err hide">Nothing found</span>
</div>
</div>
Have a look here, added some new code and created a new element when there is no found result.
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");
var empty = document.createElement("a");
empty.classList.add("empty");
empty.innerHTML="No Reault Found...";
var emptyVisiable= true;
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
emptyVisiable = false;
} else {
a[i].style.display = "none";
}
}
if (emptyVisiable)
div.appendChild(empty);
else {
empty= div.querySelector(".empty")
if (empty!== null)
empty.remove();
}
}
.dropbtn {
background-color: #e3e3e3;
background-image: url('https://image.flaticon.com/icons/png/512/25/25243.png');
background-position: 270px center;
background-repeat: no-repeat;
background-size: 5%;
color: #333 ;
border: 1px solid red;
border-radius: 5px;
min-width: 300px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #d3d3d3;
}
#myInput {
box-sizing: border-box;
background-image: url('https://www.w3schools.com/howto/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;
width: 100%;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
width: 100%;
max-height: 260px;
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;}
<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">Please select</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Abyssinian
American Bobtail
Amercian Curl
American Longhair
American Shorthair
American Wirehair
Angora
Asian
Asian Blue
Balinese
Bengal
Bengal Tiger
Bicolour
Bicolour Longhair
British Bicolour Shorthair
Birman
Black
Black and White
Black and White Longhair
Black and White Shorthair
Black Longhair
Black Shorthair British Black
</div>
</div>
you can accomplish this by adding a p tag for the error in the html and a counter that increments each time no res is found in the loop of your filter function followed by an if at the end that checks to see if the counter === the lengths of links
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");
let count = 0;
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 {
count++;
a[i].style.display = "none";
}
}
if(count == a.length )
displayNoResults(filter);
}
function displayNoResults(searchTxt) {
let noResFound = document.getElementById("noResFound");
noResFound.style.display = "block"
noResFound.innerHTML = `No results for "${searchTxt}" were found`
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Please select</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<p id="noResFound"></p>
Abyssinian
American Bobtail
Amercian Curl
</div>
</div>
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>
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>
Is there a way to allow this (search) icon to be clickable? I would like it so that it can be used as an expand/collapse button for the list below it. The list is html and I can hide and show it. I'm more curious as to how I would allow the icon to be clickable to be able to hide/show the ul/li list. If this is possible, can an animation be applied somehow. This is a sample from w3 schools, but I have my own data. Should I convert it into a different type of list? There are examples online of retractable lists with animations as well.
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
You can make clickable any DOM element by adding an event listener. In your example the icon is a background image of the input element, so you need to remove it from there and make it an independent image to interact with it. Then you can add the event listener to click, triggering a function to show / hide the list (I changed the css to start hidden).
var searchIco = document.getElementById("search-ico");
var myUL = document.getElementById("myUL");
searchIco.addEventListener("click", function() {
if(myUL.style.display == 'block') {
myUL.style.display = 'none';
// or: myUL.removeAttribute("style");
} else {
myUL.style.display = 'block';
}
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
/* New */
#search-ico {
width: 16px;
height: 16px;
}
/* Background removed, size changed */
#myInput {
width: 80%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0px;
}
#myUL {
display: none; /* Added to start hidden */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div>
<!-- Add the icon as a separate image -->
<img id="search-ico" src="https://www.w3schools.com/css/searchicon.png">
<!-- end of edited -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
You can call the slideToggle function based on jQuery (since you are already using jQuery)
$('#myInput').click(function(){
$('#myUL').slideToggle('slow');
});
Learn more about sideToggle here - http://api.jquery.com/slidetoggle/
I created an dropdown list, it have more than 25 link dropdown to display , So
i need to show only 3 from the dopdown list (not to disable others) , and perform the search option to all . please help me to find a solution
<div class="dropdown">
<input onclick="myFunction()" class="dropbtn" id="myInput"
onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
<script>
/* 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";
}
}
}
</script>
css file
.dropbtn {
background-color:#E8E0DE;
color: white;
padding: 6px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color:#FAF6F5;
}
#myInput {
border-box: box-sizing;
position:relative;
top: 10px;
color:black;
background-position: 1px 2px;
background-repeat: no-repeat;
font-size: 16px;
padding: 5px 350px 10px 15px;
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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
</style>
You just want to return at most 3 at all times you'll want to add a function similar to your filter function, but after it finds 3 items that have a display style set to "" set the rest to "none".
function limitVisibility() {
let div, a, i;
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
let counter = 0;
if (counter < 3 && a[i].style.display === "" ) {
counter += 1;
} else {
a[i].style.display = "none";
}
}
}
and include it in your onClick and onkeyup:
try this:
function filterFunction() {
var input, value, filter, ul, li, a, i, limit, init;
input = document.getElementById("myInput");
value = document.getElementById("myInput").value; // ADD INPUT VALUE
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
init = 0;
limit = 3;
for (i = 0; i < a.length; i++) {
if( (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) ) {
if (init < limit) // LIMIT to FIRST 3 results
{
a[i].style.display = "";
}
else if(value =='') // Case when Input is Empty
{
a[i].style.display = "";
}
else
{
a[i].style.display = "none";
}
init++; // counting results
}
else
{
a[i].style.display = "none";
}
}
}