Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

114
Vistas
When retyping in the searchbar is not working

I created a search box, when the user search on it will focus on what the user search. If I search About it will focus on the title “About”, then I scroll to bottom or up and search again About it didn’t focus on anything.

function Focus() {
  var search = document.getElementById("search-box").value;

  if (search.toLowerCase() == "about") {
    window.location.hash = '#about';
    document.getElementById("search-box").value = "";

    console.log("about")
  } else if (search.toLowerCase() == "skills") {
    window.location.hash = '#skill';
    document.getElementById("search-box").value = "";

    console.log("skills")
  } else if (search == "") {
    alert("Search Field is empty. Type anything");
  } else {
    alert("Not Found");
    document.getElementById("search-box").value = "";
  }
}
<input type="search" id="search-box" placeholder="Search">
<button type="submit" id="searchbar" onclick="Focus()">Search</button>



<h1 id="about">About</h1>

<h1 id="skill">Skills</h1>

<!-- There are so many things under this titles. -->

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Clear the hash before assign new hash. window.location.hash = '';

if (search.toLowerCase() == "about") {
    window.location.hash = '';
    window.location.hash = '#about';
    document.getElementById("search-box").value = "";
    }
else if(search.toLowerCase() == "skills") {
    window.location.hash = '';
    window.location.hash = '#skill';
    document.getElementById("search-box").value = "";
    }
else if(search==""){
    alert("Search Field is empty. Type anything");
}
else{
    alert("Not Found");
    document.getElementById("search-box").value = "";
    }
about 4 years ago · Juan Pablo Isaza Denunciar

0

The problem is, that the hash (#about) don't change when you search for the same hash twice. The browser will only scroll if the hash changes.

I think the best way is search for the element when you klick on the search button and get the offset of the element and then scroll to that position:

Get the Offset of the element:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Scroll to Position

window.scroll(x, y)
about 4 years ago · Juan Pablo Isaza Denunciar

0

As @Balaji Sivasakthi already answered, I would like to point out that you repeat a lot of code.

  1. If you want to clear the search box, you don't need to write that in every single if statement. You only need to write it once outside the if statement.
  2. If you save search as a variable, you can use that variable for getElementById.
  3. Save that element as a variable as well (element below), and you can check if it exists.
  4. Declare a message variable, and put an alert outside of the if statements. If message has any value apart from "", trigger the alert.

function Focus() {
  var searchBox = document.getElementById("search-box")
  var search = searchBox.value.toLowerCase();  // 2
  var element = document.getElementById(search); // 2 & 3
  var message = "";  // 4

  window.location.hash = '#';

  if (element) {  // 3 -- checks if you found any elements with id #{search}
    window.location.hash += search;  // adds element id to hash
    console.log({search});
  } else if (search) {  // 2 & 4 -- anything else than "" is true
    message = "Not Found";
  } else {
    message = "Search Field is empty. Type anything"
  }
  
  searchBox.value = ""; // 1
  
  if (message) { alert(message) } // 4 -- anything else than "" is true
}
<input type="search" id="search-box" placeholder="Search">
<button type="submit" id="searchbar" onclick="Focus()">Search</button>



<h1 id="about">About</h1>

<h1 id="skills">Skills</h1>

<!-- There are so many things under this titles. -->

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda