Concatenate URL(Search)

Question

Guys, I’m not very good at logic, I’m more of the design area. My question is the following:

I would like when the user typed in the search, it concatenates at the end of the url...for example:

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

Answer 1

With Javascript you can concatenate the input value to the attribute action form as you type (event 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>

Example to illustrate:

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>

Answer 2

You don’t need to update the value to each keystroke, you can do this only when the form is submitted.

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

In Javascript it would be:

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

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

The use of the function encodeURIComponent is essential in this case to get around problems that the injected text dynamically break your URL. For example, if it were typed a/b in the field, in the URL http://localhost/a/b. The bar here should not belong to path of your URL, it is only part of the content of path, so requires coding, to stay http://localhost/a%2Fb and thus do not interfere with the URL.

It is worth mentioning that, as the field has the name, its value will also be sent to query string: http://localhost/a%2Fb?busca-tipologia=a%2Fb. If you want to avoid this, instead of making the natural submission of the form, you can redirect the user to the page:

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);
});