Como fazer uma pesquisa na Própria Página através de um mecanismo de pesquisa

Front-end HTML
#1

Bom, me desculpem se já tiver esse tópico! Mas eu não encontrei. O meu problema é o seguinte, tenho uma página bem extensa com uma lista. Para não ter que ficar procurando na lista, fiz um textarea e um botão pesquisar. Gostaria de saber como eu faço para digitar no textarea e apos clicar em pesquisar ele me direcionar para a primeira palavra igual a digitada.

#2
#3

Bom dia,

cara o seu problema não é tão trivial assim. Bom, vamos ao problema. Você tem uma lista, dentro de uma página HTML. Pelo que eu entendi, você não quer usar uma linguagem server-side para fazer isso. Existem muitas formas de fazer isso. Vou tentar uma abordagem mais para o javascript puro.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>List Promgramming Languages</title>
  </head>
  <body>
    <input id="keyword" type="text" />
    <button id="search">
      Buscar
    </button>
    <ul id="list">
      <li>C</li>
      <li>Java</li>
      <li>Objective-C</li>
      <li>C++</li>
      <li>C#</li>
      <li>Basic</li>
      <li>PHP</li>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Transact-SQL</li>
      <li>Visual Basic .NET</li>
      <li>Perl</li>
      <li>Ruby</li>
      <li>Visual Basic</li>
      <li>Delphi/Objective Pascal</li>
      <li>F#</li>
      <li>Pascal</li>
      <li>Swift</li>
      <li>MATLAB</li>
      <li>PL/SQL</li>
    </ul>
    <h3>Filtro</h3>
    <div id="filteredList">
    </div>
    <script type="text/javascript">
      function filterByKeyword(filterKeyword) {
        // Seleciona todos os elementos filhos da lista
        var list = document.querySelector('#list').childNodes
        // Cria uma nova lista que será usada depois
        var newFilteredUl = document.createElement('ul')

        try {
           // Percorre todos os itens da lista
          for (var i = 0, length = list.length; i < length; i++) { 
             // Verifica o tipo do elemento e se ele não está vazio
            if (list[i].nodeType != 1 && null != list[i].nextSibling) {
              // Se o valor passado for igual ao valor do texto que está dentro do elemento
              if (list[i].nextSibling.innerText == filterKeyword) {
               // Cria um novo item para lista
                var newLi = document
                  .createElement('li')
                // Cria um elemento do tipo TextNode
                var newLiText = document
                  .createTextNode(filterKeyword)
                // Insere o novo texto no novo elemento LI
                newLi.appendChild(newLiText)
              }
            }
          }
        // Insere o elemento recém criado a lista criada no começo da funcão
        newFilteredUl.appendChild(newLi)
        } catch (e) { 
          console.error(e)
        }
        return newFilteredUl
      }

      var button = document.querySelector('#search')
      // Ao clicar no botão de buscar
      button.onclick = function() {
        var keyword = document.querySelector('#keyword').value

        var newList = filterByKeyword(keyword)
        // Insere a nova lista dentro da div
        document.querySelector('#filteredList').appendChild(newList)
      }
    </script>
  </body>

</html>

Umas melhorias que você poderia fazer, era dar uma mensagem caso não encontrar nada ou a forma como realiza a busca, ao invés de verificar se é “igual”, usar uma expressão regular, para comparar, porque aí, pode melhorar a forma como tu executa a busca. Poderia buscar palavras semelhantes, tipo [“Javascript”, “Java”], por exemplo.

Com isso, iria retornar mais elementos, então, você teria que modificar um pouco a função, mas imagina, que se o algoritmo encontrar mais de uma ocorrência, ele terá que criar quantos elementos derem match na sua Regex. Espero ter ajudado, qualquer coisas chama ae :+1:




#4

Gostaria de pedir uma ajuda, o que preciso é bem semelhante ao do amigo Trimander.

Eu tenho uma página de catálogo de produtos, feita apenas em HTML e CSS, gostaria de colocar um campo de busca em cima para quando o cliente pesquisar o produto a barra descesse até o produto desejado.
http://encaixebrindes.com.br/catalogo
ex: ao digitar o nome do produto tirante a página desça até o produto.