javascript – cuando escriba en el buscador quiero que tape todo y que solo se vea lo que yo busque

Cuando escriba en el buscador quiero que tape todo lo de mi pagina y que solo se vea las palabras que yo busque.

¿Cómo tendría que hacerlo?

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


<!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../package/css/swiper.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/style.scss">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/lightslider.css">
  <link rel="stylesheet" href="css/botton.scss">
  <link rel="stylesheet" href="css/mediaquery.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">



</head>

<body rightmargin="0" leftmargin="0">


  <style>

  html {
  overflow-x:hidden;
  }

  </style>







<header>
  <!---
 <input type="search" id="input-search" placeholder="Buscar aqui">
asa--->










<!--- BUSCADOR --->




<div id="container">
  <h1>Filtro <span>jQ</span>uery <img src="img/logo.png"></h1>
  <div class="content">
    <div class="search">
      <input type="text" id="busqueda" placeholder="Buscar ...">
      <i class="fa fa-search"></i>
    </div>
    <ul>
      <li>
        <h3>lorem ipsum</h3>
      </li>
      <li>
        <h3>non ultrices</h3>
      </li>
      <li>
        <h3>In augue lacus</h3>
      </li>
      <li>
        <h3>Maecenas semper</h3>
      </li>
      <li>
        <h3>ridiculus mus</h3>
      </li>
      <li>
        <h3>Vivamus sapien</h3>
      </li>
      <li>
        <h3>augue massa</h3>
      </li>
      <li>
        <h3>Nulla faucibus</h3>
      </li>
      <li>
        <h3>Sed non libero</h3>
      </li>
    </ul>
  </div>
</div><!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var busqueda = $('#busqueda'),
  titulo = $('ul li h3');
  $(titulo).each(function(){
    var li = $(this);
    //si presionamos la tecla
    $(busqueda).keyup(function(){
      //cambiamos a minusculas
      this.value = this.value.toLowerCase();
      //
      var clase = $('.search i');
      if($(busqueda).val() != ''){
        $(clase).attr('class', 'fa fa-times');
      }else{
        $(clase).attr('class', 'fa fa-search');
      }
      if($(clase).hasClass('fa fa-times')){
        $(clase).click(function(){
          //borramos el contenido del input
          $(busqueda).val('');
          //mostramos todas las listas
          $(li).parent().show();
          //volvemos a añadir la clase para mostrar la lupa
          $(clase).attr('class', 'fa fa-search');
        });
      }
      //ocultamos toda la lista
      $(li).parent().hide();
      //valor del h3
      var txt = $(this).val();
      //si hay coincidencias en la búsqueda cambiando a minusculas
      if($(li).text().toLowerCase().indexOf(txt) > -1){
        //mostramos las listas que coincidan
        $(li).parent().show();
      }
    });
  });
});



$(document).ready(function(){

  $(".search input").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("ul").filter(function() {
      $(this).toggle($(this).text().toLowerCase().trim().indexOf(value) > -1 && value.length > 0)
    });
  });
});



</script>








<div class="container">
  <!--slider------------------->
  <ul id="autoWidth" class="cs-hidden">
  <!--1------------------------------>
<li class="item-a">
  <!--slider-box-->
  <div class="box">
  <p class="marvel">TOP 1</p>
  <!--model-->
  <img src="imgtop5/reyleon.jpg" class="model">
  <!--details-->
  <div class="details">
  <!--logo-character-->
  <img src="" class="logo" width="100px" style="height: auto;">
  <!--character-details-->
  <p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
  </div>

  </div>
  </li>
  <!--2------------------------------>
<li class="item-a">
  <!--slider-box-->
  <div class="box">
  <p class="marvel">TOP 2</p>
  <!--model-->
  <img src="imgtop5/prodigy.png" class="model">
  <!--details-->
  <div class="details">
  <!--logo-character-->
  <img src="img2/Deadpool-logo.png" class="logo" >
  <!--character-details-->
  <p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
  </div>

  </div>
  </li>
  <!--3------------------------------>
<li class="item-a">
  <!--slider-box-->
  <div class="box">
  <p class="marvel">TOP 3</p>
  <!--model-->
  <img src="img2/SpiderMan.png" class="model">
  <!--details-->
  <div class="details">
  <!--logo-character-->
  <img src="img2/SpiderMan-logo.png" class="logo" >
  <!--character-details-->
  <p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
  </div>

  </div>
  </li>
  <!--4------------------------------>
<li class="item-a">
  <!--slider-box-->
  <div class="box">
  <p class="marvel">TOP 4</p>
  <!--model-->
  <img src="img2/Venom.png" class="model">
  <!--details-->
  <div class="details">
  <!--logo-character-->
  <img src="img2/Venom-logo.png" class="logo" >
  <!--character-details-->
  <p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
  </div>

  </div>
  </li>
  <!--5------------------------------>
<li class="item-a">
  <!--slider-box-->
  <div class="box">
  <p class="marvel">TOP 5</p>
  <!--model-->
  <img src="img2/Thor.png" class="model">
  <!--details-->
  <div class="details">
  <!--logo-character-->
  <img src="img2/Thor-logo.png" class="logo">
  <!--character-details-->
  <p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
  </div>

  </div>
  </li>
  <!--6------------------------------>
<li class="item-a">
  <!--slider-box-->
  <div class="box">
  <p class="marvel">TOP 6</p>
  <!--model-->
  <img src="img2/IronMan.png" class="model">
  <!--details-->
  <div class="details">
  <!--logo-character-->
  <img src="img2/IronMan-logo.png" class="logo" >
  <!--character-details-->
  <p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
  </div>

  </div>
  </li>
  </ul>




</div>




  <!-- Swiper -->
    <h1></h1>

    <div class="netflix-slider">
      <h2>Popular on Netflix</h2>
      <div class="swiper-container">
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <ul>
              <li>
          <img src="img/1.jpg" alt="Movie Title">

            </li>

          </div>


          <div class="swiper-slide">
            <img src="img/2.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/3.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/4.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/5.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/6.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/7.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/8.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/9.jpg" alt="Movie Title">
          </div>

          <div class="swiper-slide">
            <img src="img/10.jpg" alt="Movie Title"></div>
        </div>

        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>

    <div class="netflix-slider">
      <h2>Continue watching...</h2>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="img/1.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/2.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/3.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/4.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/5.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/6.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/7.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/8.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/9.jpg" alt="Movie Title"></div>
          <div class="swiper-slide"><img src="img/10.jpg" alt="Movie Title"></div>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>

    <!-- Swiper JS -->
    <script src="../package/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        slidesPerView: 6,
        spaceBetween: 10,
        slidesPerGroup: 2,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>



<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/script1.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/search.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/Jquery3.3.1.js"></script>
<script src="js/lightslider.js"></script>
<script src="js/script.js"></script>
<script src="js/menu.js"></script>
<script src="js/slider.js"></script>
<script src="js/suggestions.js"></script>
<script src="https://kit.fontawesome.com/712575d4a5.js" crossorigin="anonymous"></script>

</body>

</html>



/*BUSCADOR*/
* {
    font-family: Arial;
}



#container {
    text-align: center;
    max-width: 1170px;
    margin: 0 auto;

}
h1 span {
    color: red;
}
h1 img {
    max-width: 200px;
}
.content {
    margin-top: 60px;
}
.search {
    max-width: 300px;
    margin: 0 auto;
    position: relative;

}
.search input {
    width: 300px;
    padding: 10px;
    border: 1px solid #cecece;
    border-radius: 3px;
}
.search i {
    position: absolute;
    cursor: pointer;
    right: -12px;
    top: 9px;

}
ul {
    padding: 0px;
    margin-top: 40px;
            display: none;
}
ul li {
    list-style-type: none;
    float: left;
    border: 1px solid #cecece;
    padding: 10px;
    margin: 10px;
    width: 347px;
}