How to take the value typed in an input and then add it to a Javascript URL?

Question

I’m creating a search bar on my localhost. The intention is that when the user enters what he would like to search for, the value is added to the value of q in, for example:

const solr = "http://localhost:8983/solr/csv_indexing";
let videoList = await fetch(solr + "/select?q=" + query.value);

And query would be what the user typed, assume that home was typed, it would be redirected to the address: "http://localhost:8983/solr/csv_indexing/select?q=casa".

What I already have of structure in HTML is just an area to write in the center of a page not customized for now:

<div class="caixa-busca">
    <input type="text" name="" class="buscar-txt" placeholder="Pesquisar..."/>
    <a class="buscar-btn">
        <i class="far fa-search"></i>
    </a>

How do I get this result?

Answer 1

const solr = "http://localhost:8983/solr/csv_indexing";

document.getElementById('btn-buscar').onclick = function() {
  let q = document.getElementById('txtbusca');
  let videoList = solr + "/select?q=" + q.value;
  /* window.location.url = videoList; */
  console.log(videoList);
};

<input type="text" name="txtbusca" id="txtbusca" placeholder="">
<button id="btn-buscar">Buscar</button>

Answer 2

To capture the value of <input>, you can use the querySelector to, from the field selector, get your Javascript object and then use the property value to get the current value. So:

const btn = document.querySelector('#search-submit');
const field = document.querySelector('#search');

btn.addEventListener('click', () => {
  console.log(field.value);
});

<input id="search" type="text" />
<button type="button" id="search-submit">Buscar</button>

The problem is that if you concatenate the value directly to a query string from the URL, you may end up generating an invalid URL. For example, if you concatenate the string directly and the user has typed some character like ? or &, could invalidate your URL, add more parameters, etc - which is obviously a problem.

Therefore, you can use the function encodeURIComponent before concatenating. See the difference:

const base = 'http://localhost:8983/solr/csv_indexing';
const query = 'foo&other_param=bar';

const withoutEncodeURIComponent = base + '/select?q=' + query;
const withEncodeURIComponent = base + '/select?q=' + encodeURIComponent(query);

console.log({ withoutEncodeURIComponent, withEncodeURIComponent });

Put it all together, you get something like:

const btn = document.querySelector('#search-submit');
const field = document.querySelector('#search');

const baseURI = 'http://localhost:8983/solr/csv_indexing';

btn.addEventListener('click', () => {
  const query = encodeURIComponent(field.value);
  const url = baseURI + '/select?q=' + query;
  
  // Faça algo com `url`. (O `fetch`, por exemplo):
  console.log(url);
});

<input id="search" type="text" />
<button type="button" id="search-submit">Buscar</button>

Another option to generate the URL is to use the constructor itself URL:

const url = new URL('http://localhost:8983/solr/csv_indexing/select');

// Adicionamos o parâmetro `q`. Ele já será automaticamente "escapado":
url.searchParams.append('q', 'foo');

// Obtem a URL:
console.log(url.toString());