4

Galera, não sou muito bom em lógica, sou mais dá área do design. Minha dúvida é o seguinte:

Gostaria de quando o usuário digitasse na pesquisa, ele concatenasse no final da url...por exemplo:

<form action="http://teste.desenvol.br/#/pesquisa/esplanada/(concatenar aqui o que foi digitado)" method="GET" target="_blank" class="pesquisa-plataforma">
  <div class="form-group mb-4">
    <input name="busca-tipologia" href="" type="search" class="form-control" id="busca-tipologia" aria-describedby="" placeholder="Pesquisar dados...">
  </div>
</form>

2 Respostas 2

2

Com JavaScript você consegue concatenar o valor do input ao atributo action do form à medida que vai digitando (evento keyup):

<script>
document.addEventListener("DOMContentLoaded", function(){ // aguarda o DOM

   // guarda o action original
   var action = document.querySelector('.pesquisa-plataforma').action;
   document.getElementById("busca-tipologia").addEventListener("keyup", function(){
      // concatena o que foi digitado com o action original
      document.querySelector('.pesquisa-plataforma').action = action+this.value;
   });
});
</script>

Exemplo para ilustrar:

document.addEventListener("DOMContentLoaded", function(){ // aguarda o DOM

   // guarda o action original
   var action = document.querySelector('.pesquisa-plataforma').action;
   document.getElementById("busca-tipologia").addEventListener("keyup", function(){
      // concatena o que foi digitado com o action original
      document.querySelector('.pesquisa-plataforma').action = action+this.value;
      
      // abaixo é só para ilustrar. Apague as linhas abaixo
      console.clear();
      console.log(document.querySelector('.pesquisa-plataforma').action);
      
   });
});
<form action="http://teste.desenvol.br/#/pesquisa/esplanada/" method="GET" target="_blank" class="pesquisa-plataforma">
  <div class="form-group mb-4">
    <input name="busca-tipologia" href="" type="search" class="form-control" id="busca-tipologia" aria-describedby="" placeholder="Pesquisar dados...">
  </div>
</form>

1
  • 1
    Valeu, Sam ! Deu certo ! Obrigado ! Commented 29/08/2019 às 16:37
1

Você não precisa atualizar o valor a cada tecla digitada, pode fazer isso apenas quando o formulário for submetido.

<form id="form-tipologia" action="http://teste.desenvol.br/#/pesquisa/esplanada/" method="GET" class="pesquisa-plataforma">
  <div class="form-group mb-4">
    <input name="busca-tipologia" href="" type="search" class="form-control" id="busca-tipologia" aria-describedby="" placeholder="Pesquisar dados...">
  </div>
</form>

No JavaScript ficaria:

const form = document.getElementById("form-tipologia");
const input = document.getElementById("busca-tipologia");

form.addEventListener("submit", function () {
  this.action += encodeURIComponent(input.value);
});

O uso da função encodeURIComponent é essencial nesse caso para contornar problemas que o texto injetado dinamicamente quebrar a sua URL. Por exemplo, se fosse digitado a/b no campo, na URL ficaria http://localhost/a/b. A barra aqui não deve pertencer ao path da sua URL, ela é apenas parte do conteúdo do path, por isso demanda a codificação, para ficar http://localhost/a%2Fb e assim não interferir na URL.

Vale citar que, como o campo possui o name, o seu valor também será enviado na query string: http://localhost/a%2Fb?busca-tipologia=a%2Fb. Se quiser evitar isso, ao invés de fazer a submissão natural do formulário, você pode redirecionar o usuário para a página:

const form = document.getElementById("form-tipologia");
const input = document.getElementById("busca-tipologia");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  window.location.href = this.action + encodeURIComponent(input.value);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .