javascript - 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:

Answer 1

Waitting for answers