Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

117
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda