Conceal the list items during search queries

Question

Conceal the list items during search queries

I need help filtering a list of items based on user input. Currently, all the items are visible, but I want them to only show up when a user types a name.

I attempted changing the li style to block, but it didn't work as expected.

li[i].style.display = "none";

I am a beginner in JS and currently taking some online courses.

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";
        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/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: 12px;
}

#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;
}

<h2>Car Directory</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name">

<ul id="myUL">
  <li><a href="#">Volvo</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Mazda</a></li>
  <li><a href="#">Toyota</a></li>
  <li><a href="#">Yamaha</a></li>
  <li><a href="#">Honda</a></li>
  <li><a href="#">Dodge</a></li>
</ul>

If you can, please check out my pen here: https://codepen.io/emmabbb/pen/wvrpqbp

javascript

Answer 1

Answer №1

Ensure the search box is not empty by including filter in the if statement:

if (filter && txtValue.toUpperCase().indexOf(filter) > -1)

and remember to call your function after defining it: myFunction()

**Additionally, for your specific scenario, consider using the input event instead of keyup

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 (filter && txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

myFunction()

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/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: 12px;
}

#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;
}

<h2>Vehicle Listings</h2>

<input type="text" id="myInput" oninput="myFunction()" placeholder="Search for Vehicles" title="Type in a name">

<ul id="myUL">
  <li><a href="#">Audi</a></li>
  <li><a href="#">Mercedes-Benz</a></li>
  <li><a href="#">Ford</a></li>
  <li><a href="#">Lamborghini</a></li>
  <li><a href="#">Porsche</a></li>
  <li><a href="#">Chevrolet</a></li>
  <li><a href="#">Tesla</a></li>
</ul>

Answer 2

Ensure the search box is not empty by including filter in the if statement:

if (filter && txtValue.toUpperCase().indexOf(filter) > -1)

and remember to call your function after defining it: myFunction()

**Additionally, for your specific scenario, consider using the input event instead of keyup

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 (filter && txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

myFunction()

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/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: 12px;
}

#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;
}

<h2>Vehicle Listings</h2>

<input type="text" id="myInput" oninput="myFunction()" placeholder="Search for Vehicles" title="Type in a name">

<ul id="myUL">
  <li><a href="#">Audi</a></li>
  <li><a href="#">Mercedes-Benz</a></li>
  <li><a href="#">Ford</a></li>
  <li><a href="#">Lamborghini</a></li>
  <li><a href="#">Porsche</a></li>
  <li><a href="#">Chevrolet</a></li>
  <li><a href="#">Tesla</a></li>
</ul>

Answer 3

Answer №2

If you want to create a searchable car directory using HTML only, you can achieve this without the need for JavaScript.

<h2>Car Directory</h2>
<input list="cars" placeholder="Search for Cars">

<datalist id="cars">
    <option value="Volvo">
    <option value="BMW">
    <option value="Mazda">
    <option value="Toyota">
    <option value="Yamaha">
    <option value="Honda">
    <option value="Dodge">
</datalist>

Answer 4

If you want to create a searchable car directory using HTML only, you can achieve this without the need for JavaScript.

<h2>Car Directory</h2>
<input list="cars" placeholder="Search for Cars">

<datalist id="cars">
    <option value="Volvo">
    <option value="BMW">
    <option value="Mazda">
    <option value="Toyota">
    <option value="Yamaha">
    <option value="Honda">
    <option value="Dodge">
</datalist>

Answer 5

Answer №3

To start, you can hide the list. Once some input is provided, you can remove the 'hide' class.

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 (input.value.length > 0)  {
      ul.classList.remove('hide');
    } else {
      ul.classList.add('hide');
    }
  
   
    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";
        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/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: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0; 
}

.hide {
  display: none;
}

#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;
}

<h2>Car Directory</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name">

<ul id="myUL" class="hide">
  <li><a href="#">Volvo</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Mazda</a></li>
  <li><a href="#">Toyota</a></li>
  <li><a href="#">Yamaha</a></li>
  <li><a href="#">Honda</a></li>
  <li><a href="#">Dodge</a></li>
</ul>

Answer 6

To start, you can hide the list. Once some input is provided, you can remove the 'hide' class.

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 (input.value.length > 0)  {
      ul.classList.remove('hide');
    } else {
      ul.classList.add('hide');
    }
  
   
    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";
        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/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: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0; 
}

.hide {
  display: none;
}

#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;
}

<h2>Car Directory</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name">

<ul id="myUL" class="hide">
  <li><a href="#">Volvo</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Mazda</a></li>
  <li><a href="#">Toyota</a></li>
  <li><a href="#">Yamaha</a></li>
  <li><a href="#">Honda</a></li>
  <li><a href="#">Dodge</a></li>
</ul>

Conceal the list items during search queries

Answer №1

Answer №2

Answer №3

Similar questions

jQuery parent() Function Explained

Error: When executing the npm run build command, I encountered a TypeError stating that Ajv is not a

Issue with sending data to the server via API using AngularJS controller

Apps hosted on Heroku are restricted from accessing CORS, even within the platform's domain

Using JavaScript to extract data from a JSON-formatted URL

issue with the submit button due to non-functional base64 encoded image

Concerns with the window's onload function

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Steps to activate a modal window using a double click occurrence within a reactable table

setting a variable equal to an array element

Is there a way to ensure that the function within the 'for loop' is executed prior to sending the response in NodeJS?

Animating Vue lists using Greensock JS hooks allows for seamless transitions by ensuring that the leave animation completes before triggering the enter

What is the most efficient way to retrieve a substantial volume of data from Mongodb quickly, especially when the query results require processing before transmitting to the client?

Generate a pre-set Promise<T>[] for delivering the component in the absence of a backend at the moment

Font-awesome integration in Vue.js causing extremely slow hot reloading

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Converting Java 8 LocalDate to a JavaScript Date object

I am facing an issue with the Tailwind Flowbite Datepicker dropdown UI when running "npm run prod" for minification. The class is not being added during minification on the npm

Next.js App encounters a missing API route (The requested page is not found)

The drop-down menu continually moves in an erratic manner