Search Dropdown Javascript - How to hide list?

Nikey63

I'm a beginner in Javascript/HTML/CSS. So I'm sorry if I'm missing something obvious.

My Task: I want to create a search bar on my website (website for images). With this search bar the user should be able to search for "keywords" which I will determine in a list. Every item in my list should lead the user to a new html site.

My Problem: The list that i have created is visible under the search input. But I want to hide the list at first and just show the suggestions or matches from what the user enters in the search bar. But if I hide the list in css, it's obviously also not gonna show the matches when theres something typed in the input. I included code and screenshots at the bottom. Thanks!

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Topic.." title="Type in a name">
    
    <ul id="myUL">
      <li><a href="shuffle4.html">School</a></li>
      <li><a href="shuffle4.html">Sport</a></li>
      <li><a href="shuffle4.html">Tennis</a></li>
      <li><a href="shuffle4.html">Work</a></li>
      <li><a href="shuffle4.html">Funny</a></li>
      <li><a href="shuffle4.html">Money</a></li>
      <li><a href="shuffle4.html">Food</a></li>
    </ul>
    
    <script>
    function myFunction() {
        var input, filter, ul, li, a, 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++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
    </script>

Screenshots: All the suggestions from my list are showing, how can i hide them if nothing is typed in the input?

0stone0

You can use the same idea you've already used in the <li>, use display: none to hide the element, then on every call of myFunction(), check the content of the <input> and edit the <ul> style accordingly:

// If we've got more than 1 char in <input>, show it, otherwise, hide
const inputDisplay = input.value.length > 1 ? 'block' : 'none';
ul.style.display = inputDisplay;

function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");

// If we've got more than 1 char in <input>, show it, otherwise, hide
const inputDisplay = input.value.length > 1 ? 'block' : 'none';
ul.style.display = inputDisplay;

for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}
ul { display: none; }
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Topic.." title="Type in a name">

<ul id="myUL">
<li><a href="shuffle4.html">School</a></li>
<li><a href="shuffle4.html">Sport</a></li>
<li><a href="shuffle4.html">Tennis</a></li>
<li><a href="shuffle4.html">Work</a></li>
<li><a href="shuffle4.html">Funny</a></li>
<li><a href="shuffle4.html">Money</a></li>
<li><a href="shuffle4.html">Food</a></li>
</ul>

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

How to produce a good dropdown list of timezones that correspond to java TimeZone(s)

how to attatch scrollbar to dropdown list in tkinter?

How to hide the done button and search bar in SafariViewController

how to set placeholder for country select javascript dropdown

How to apply .hide() in a particular dropdown in jQuery?

How to search for values from a list in the document - Firestore

How to hide table before php search

When click dropdown other dropdown should hide

How to search a list effectively in python?

How to structure a search list in Firestore?

jquery on search filter - if search does not match, option gets hidden but optgroup still displayed, how to hide optgroup

jquery on search filter - if search does not match, option gets hidden but optgroup still displayed, how to hide optgroup

How to hide html tag content in JavaScript?

How to search a context using a list of string and order it?

How to insert data from ViewModel to Database with using dropdown list in View

how can remove last dropdown divider class in list items on vuejs

JavaScript - Change multiple divs when selecting an element from DropDown List

How to simulate dropdown list with input?

How to display and hide specific divs using javascript?

Javascript pdf fill dropdown list with Loop

How to insert data into another table from dynamic dropdown list

How to update partial view with value depending on dropdown list choice

How to appear different dropdown group list on onChange of HTML <SELECT> tag

How to construct a bootstrap dropdown list with static placeholder and custom icon

Hide a dropdown on click

JavaScript : How to get selected dropdown value?

How to hide something when no search result found in angular

create a cascading dropdown list with JavaScript and jQuery

create a cascading dropdown list with JavaScript and jQuery