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