Skip to main content
adicionou 556 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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

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);
});
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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.