CODEWITHSUNDEEP
javascripthtmlcss
codejourney
codejourney

Reputation: 319

How to reset my list in my searchbox with only html/css/javascript ( no jquery, etc)?

i have a searchbox with a dropdown menu that filters items from the list when you enter letters. My problem is that when i click the X button, it clears the searchbox like expected but it doesn't reset the list of items under the box. Example : if i type javascript we will see javascript under the box but when i click the X button, it will still be written javascript and not the initial list.

So is there any possible way that i can reset it to the initial list using javascript ? ( NOTE : i cannot use jquery or any frameworks)

Thanks a lot.

function filter() {
  var value, myList, name;

  value = document.getElementById("value").value.toUpperCase();
  myList = document.querySelectorAll(".myList > li");
  Array.prototype.forEach.call(myList, function(element){
    name = element.innerHTML;
    element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
  });
}

document.getElementById('value').addEventListener('keyup', filter);

function myFunction() {
  document.querySelector('.clearable').value = '';
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
    
    
    
input[type="button"] {
    margin-left: -30px;
    border: none;
    background-color: transparent;
    outline: none;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="searchbox">
      <input class="clearable" type="text" id="value" placeholder="Search" />
      <input type="button" onclick="myFunction()" value="X">
      <ul class="myList">
        <li class="name">Javascript</li>
        <li class="name">Java</li>
        <li class="name">CSS</li>
        <li class="name">Python</li>
        <li class="name">C++</li>
      </ul>
    </div>
    <script src="search.js"></script>
  </body>
</html>

Upvotes: 2

Views: 194

Answers (1)

Kyle
Kyle

Reputation: 1503

You could just reuse the code you have, loop over all of the li elements and re-show them on the myFunction call:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
   }



input[type="button"] {
    margin-left: -30px;
    border: none;
    background-color: transparent;
    outline: none;
}
    </style>
  </head>
  <body>
    <div class="searchbox">
      <input class="clearable" type="text" id="value" placeholder="Search" />
      <input type="button" onclick="myFunction()" value="X">
      <ul class="myList">
        <li class="name">Javascript</li>
        <li class="name">Java</li>
        <li class="name">CSS</li>
        <li class="name">Python</li>
        <li class="name">C++</li>
      </ul>
    </div>
    <script>
    function filter() {
  var value, myList, name;

  value = document.getElementById("value").value.toUpperCase();
  myList = document.querySelectorAll(".myList > li");
  Array.prototype.forEach.call(myList, function(element){
      name = element.innerHTML;
    element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
  });
}

document.getElementById('value').addEventListener('keyup', filter);

function myFunction() {
  var myList;
  document.querySelector('.clearable').value = '';
  myList = document.querySelectorAll(".myList li");
  Array.prototype.forEach.call(myList, function(element){
    element.style.display = 'list-item';
  });
}
    </script>
  </body>
</html>

Upvotes: 1

Related Questions