Search bar functionalities

Question

This is my first post here and also im newbie in html, css and js.

I am currently doing a game review site, in which you can see those games as cards, and you can click on each card to see the complete review (Trial pen on bottom).

You don't need to look at CSS or HTML at all, JS has the code that makes the search bar trully functional.

I had few games (cards) before but now that I am adding a lot more, I found practical to add a search field where people can search by the name the game they want to, and the cards that contain similarities would appear. I did that, and works great, but it only searches the cards in the same page.

You can try the search field (just to see it works) by searching:

GAME
JUEGO
NOT
ALONE

So my objective is to achieve some things but I don't know how to do it:

1. The search bar finds all games no matter if they are or not in the same page you are searching

2. If nothing found, add a text on the "autocomplete" in searchbar instead

3.. If you click with the mouse on an autocomplete result it does nothing cause it doesn't detect keyboard activity (with keyboard arrows work)

4. Add the same results on cards that those who appear on the searchbar

I am not even sure if all of this is possible but I would really appreciate some help!

Thank you in advanced.

/**/
    function search_reviews() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('grid-item');

    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="";
        }
      }
    }

/*Fuente para toda la web*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
  font-family: 'Poppins', sans-serif !important;
}

/*Colores generales de la web*/
:root {
  /*Común*/
  --navbar: linear-gradient(to right, #D05050, #B43A3A);
  --efecto-navbar: #881612;
  --letrafooternavbar: white;
  --dropdown: black;
  --dropdown-hover: #D05050;
  --dropdown-hover-text: white;
  --fondo: white;
  --letra: black;
  --footer: linear-gradient(to right, #D05050, #B43A3A);
  --botones-fondo: linear-gradient(to bottom right, #B74040, #992c2c);
  --botones-border: linear-gradient(to bottom right, #B74040, #992c2c);
  --botones-text: white;
  --botones-hover: linear-gradient(to bottom right, #D05050, #B43A3A);

  /*Especifico de página*/
  --header: linear-gradient(to right, #D05050, #B43A3A);
  --pagination-fondo: linear-gradient(to right, #D05050, #B43A3A);
  --pagination-letra: black;
  --pagination-letra-active: white;
  --pagination-hover: lightgrey;
  --card-background: white;
  --card-text: black;
  --card-shadow: #ccc;
  --card-border: rgba(0,0,0,.125);
  --label-cat-disabeled: lightgray;
  --boton-cat-fondo: #b74040;
  --boton-cat-hover: linear-gradient(to bottom, #D05050, #B43A3A);
  --boton-cat-border: #8a0505;
  --boton-cat-shadow1: #8a0505;
  --boton-cat-shadow2: #ffe3e2;
  --cat-fondo: #eee;
  --cat-fondo-active: linear-gradient(to right, #D05050, #D05050);
  --cat-text: black;
  --cat-text-active: white;
  --cat-hover: #ccc;
}

/*Colors darkmode*/
[data-theme=dark] {
  /*Común*/
  --navbar: #131313;
  --efecto-navbar: #404040;
  --letrafooternavbar: #d6d6d6;
  --dropdown: #1d1d1d;
  --dropdown-hover: #3c3c3c;
  --dropdown-hover-text: #d6d6d6;
  --fondo: #1d1d1d;
  --letra: #d6d6d6;
  --footer: #131313;
  --botones-fondo: #131313;
  --botones-border: #131313;
  --botones-text: #d6d6d6;
  --botones-hover: #0a0a0a;

  /*Especifico de página*/
  --header: #131313;
  --pagination-fondo: #131313;
  --pagination-letra: #d6d6d6;
  --pagination-hover: #404040;
  --card-background: #1d1d1d;
  --card-text: #d6d6d6;
  --card-shadow: black;
  --card-border: #3d3d3d;
  --label-cat-disabeled: #3d3d3d;
  --boton-cat-fondo: #171717;
  --boton-cat-hover: #1d1d1d;
  --boton-cat-border: #3d3d3d;
  --boton-cat-shadow1: #3d3d3d;
  --boton-cat-shadow2: #171717;
  --cat-fondo: #131313;
  --cat-fondo-active: #343434;
  --cat-text: #d6d6d6;
  --cat-text-active: #d6d6d6;
  --cat-hover: #343434;
}

/*Page loader*/
#loader {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.5;
  background-color: transparent;
  z-index: 99;
  text-align: center;
}

#loader-image {
  border: 12px solid lightgrey;
  border-radius: 50%;
  border-top: 12px solid #444444;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.centrarLoader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/*Estilo body*/
body {
  background-color: var(--fondo);
  color: var(--letra);
}

/*Estilo navbar*/
.navbar-area {
  background: var(--navbar);
}

.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.site-navbar li:hover {
  opacity: 50%;
}

.site-navbar li {
  pointer-events: none;
}

.site-navbar a {
  pointer-events: all;
}

a.site-logo {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.site-navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.toggleDark {
  font-style: normal;
  color: var(--leta);
}

/*Dropdown en navbar (Extras)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a:hover {
  color: var(--dropdown-hover-text);
  background-color: var(--dropdown-hover);
}

.dropdown-divider {
  margin-top: -.1em;
}

.dropdown-content-2 {
  min-height: 36px;
  padding-top: 3px;
}

.dropdown-content a {
  color: var(--dropdown);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
  margin-left: -1em; /*Centrar dropdown*/
  margin-top: .2em;
}

.invisible {
  visibility: hidden;
}

.dropbtn {
  background-color: transparent;
  color: var(--letrafooternavbar);
  font-weight: bold;
  border: none;
  padding-top: .6em;
  padding-left: 1em;
  padding-right: 1em;
}

/*Efecto hover circulos*/
.site-navbar ul li a {
  color: var(--letrafooternavbar);
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

ul.container {
  margin: 0 auto;
    padding: 1em 41.3em; /*Distancia elementos navbar (derecha)*/
    text-align: center;
}

ul.container li {
  color: var(--letrafooternavbar);
  text-decoration: none;
  font: 20px;
  margin: 0px 10px;
  padding: 10px 10px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}

ul.circleBehind li:before, ul.circleBehind li:after {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 4px solid var(--efecto-navbar);
  transform: translateX(-50%) translateY(-50%) scale(0.8);
  border-radius: 50%;
  background: transparent;
  content: "";
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}

ul.circleBehind li:after {
  border-width: 2px;
  transition: all 0.4s;
}

ul.circleBehind li:hover:before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
}

ul.circleBehind li:hover:after {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/*Estilo del header*/
.header {
  width: 100%;
  padding:140px;
  text-align: center;
  background: var(--header);
  color: var(--letrafooternavbar);
}

/*Estilo apartados de la web en home*/
.apartados {
  padding-top: 40px;
}

.apartadosTitle {
  padding-top: .3em;
}

.btn {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

.btnHome {
  color: var(--botones-text);
  background: var(--botones-fondo);
  border-color: var(--botones-border);
  width: 10em;
  height: 3em;
  padding-top:10px;
  text-transform: uppercase;
  font-weight: 500;
}

.btnHome:hover {
  color: var(--botones-text);
  background: var(--botones-hover);
  border-color: var(--botones-hover);
}

/*Estilo de paginación (usado en reviews)*/
ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 1.3em;
}

ul.pagination li {
  display: inline;
}

ul.pagination li a {
  color: var(--pagination-letra);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

ul.pagination li a.active {
  background: var(--pagination-fondo);
  color: var(--pagination-letra-active);
}

ul.pagination li a:hover:not(.active) {
  background-color: var(--pagination-hover);
}

div.centerFooter {
  padding-top: .5em;
  text-align: center;
}

/*Estilo del footer*/
.footerMio {
  margin-top: 2em;
  background: var(--footer) !important;
}

.footerMio p {
  color: var(--letrafooternavbar);
}

.footerMio h5 {
  font-weight: bold;
  color: var(--letrafooternavbar);
}

.footerList a {
  color: var(--letrafooternavbar);
  text-decoration: none;
  text-transform: uppercase;
  padding: 3px 3px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}

.footerList a:hover {
  opacity: 50%;
}

.footerSocial {
  padding-top: .5em;
}

.footerIcons {
  max-width: 1.8em;
}

/*Estilo redes sociales footer*/
.footerimagerow {
    display: inline-flex;
    flex-wrap: wrap;
    width: 75%;
  margin-top: -.5em;
  margin-left: -.15em;
    z-index: 0;
}

.footerimagecolumn {
    float: left;
    flex: 10%;
    background:url('') no-repeat 0 0;
    z-index: 0;
}

.swap-on-hover img {
  position: absolute;
}

.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover:hover > .swap-on-hover__front-image{
  opacity: 0;
}

.swap-on-hover2 img {
  position: absolute;
}

.swap-on-hover2 .swap-on-hover__front-image2 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover2:hover > .swap-on-hover__front-image2{
  opacity: 0;
}

.swap-on-hover3 img {
  position: absolute;
}

.swap-on-hover3 .swap-on-hover__front-image3 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover3:hover > .swap-on-hover__front-image3{
  opacity: 0;
}

.swap-on-hover4 img {
  position: absolute;
}

.swap-on-hover4 .swap-on-hover__front-image4 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover4:hover > .swap-on-hover__front-image4{
  opacity: 0;
}

.swap-on-hover5 img {
  position: absolute;
}

.swap-on-hover5 .swap-on-hover__front-image5 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover5:hover > .swap-on-hover__front-image5{
  opacity: 0;
}

/*Preview test juegos*/
.previesTestBody {
  visibility: visible !important;
}

.previewTest {
  cursor: default;
}

.previewTitleTest {
  text-align: center;
  vertical-align: middle;
  color: var(--letra);
  margin-top: 5.3em;
  font-size: 5em;
}

/*Estilo del tag filter*/
.enabledLabel {
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: var(--boton-cat-hover);
  border: 2px solid var(--boton-cat-border);
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.disabledLabel {
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: var(--label-cat-disabeled);
  border: 2px solid grey;
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
  transform: translate(0em, 0.75em);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}

label.enabledLabel::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--boton-cat-fondo);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--boton-cat-shadow1), 0 0.625em 0 0 var(--boton-cat-shadow2);
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

label.enabledLabel:hover {
  background: var(--boton-cat-hover);
  transform: translate(0, 0.25em);
}

label.enabledLabel:hover::before {
  box-shadow: 0 0 0 2px var(--boton-cat-shadow1), 0 0.5em 0 0 var(--boton-cat-shadow2);
  transform: translate3d(0, 0.5em, -1em);
}

label.enabledLabel:active {
  background: var(--boton-cat-hover);
  transform: translate(0em, 0.75em);
}

label.enabledLabel:active::before {
  box-shadow: 0 0 0 2px var(--boton-cat-shadow1), 0 0 var(--boton-cat-shadow2);
  transform: translate3d(0, 0, -1em);
}

.fila1 {
  width: auto;
  height: auto;
  display:inline-block;
  padding-left: 7.2em;
  padding-top: 1em;
}

.fila2 {
  width: auto;
  height: auto;
  display:inline-block;
  padding-left: 4.2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

/*Gird cards*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/*Estilo cards*/
.card {
  border: 1px solid var(--card-border);
}

.card-title {
  color: var(--card-text);
  padding-top: 15px;
  font-weight: bold;
}

.card-text {
  font-size: 15px;
  padding-left: 1em;
  padding-right: 1em;
}

.card-filters {
  font-size: 15px;
}

.card-filters::before {
  content: 'Categoria/s: ';
  font-weight: bold;
}

.card-shadow {
  box-shadow: 10px 10px 5px var(--card-shadow);
  transition: all 0.3s;
}

.card-shadow:hover {
  transform: scale(1.05);
  transition: all 0.3s;
}

.card-body {
  padding: 0rem 0rem;
  background-color: var(--card-background);
}

.btn {
  border-radius: 0;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
  box-shadow: 10px 10px 5px var(--card-shadow);
}

.boton {
  color: white;
  background: var(--botones-fondo);
  border-color: var(--botones-border);
  width: 100%;
  height: 3em;
  padding-top:10px;
  text-transform: uppercase;
  font-weight: 500;
}

.boton:hover {
  color: white;
  background: var(--botones-hover);
  border-color: var(--botones-hover);
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

/*Efecto shine en card images*/
figure {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

.shine figure {
    position: relative;
}

.shine figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.shine figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

/*Buscador*/
.buscador {
  display: grid;
  grid-template-columns: auto;
}

#searchbar{
  margin-left: 2em;
  margin-right: 2em;
  padding: 15px;
  border-radius: 10px;
  border-width: 1.5px;
  margin-top: 1em;
  width: 96.8%;
}



  
  
  
   
  



  
  
    
      
        logo
      
    
  

  
  
    
  

  
  
    
      
        
          
          
            GAME1
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            NOT GAME2
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            JUEGO1
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            NOT JUEGO2
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            GAMEING3
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            JUEGO TEST3
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            ALONE
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    

    
      
        
          
          
            GAME TEST4
            test
            Individual, Terror, Puzzles
            Ver review
          
        
      
    

    
      
        
          
          
            NOT NOT
            Aqui estaría la descripción y breve explicación de la card
            test
            Ver review
          
        
      
    
  

  
  
    
        «
        1
        2
        3
        4
        5
        6
        7
        »
      
    

  
  
    
      
        
          Contenido de la web

          
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
            voluptatem veniam, est atque cumque eum delectus sint!
          
        

        
          VER

          
            
              Home
            
            
              Reviews
            
            
              Juegos
            
            
              Redes
            
          
        

        
          REDES SOCIALES
          
            
              Link 1
            
            
              Link 2
            
            
              Link 3
            
            
              Link 4
            
          
        
      
    

    
      © 2021 Copyright:
      MDBootstrap.com

Search bar functionalities

0 Answers