Search bar "dynamic" html, css, js

Question

Hello! My name is Caio and I am layman in the JS category, I am still learning.

I have a challenge that is to build a search bar that searches multiple "keywords" in the same bar and returns each respective result of that search at once.

Examples:

Today my bar filters 1 "keyword" at a time:

Exemplo Generalista:
Barra de Pesquisa: João
resultado:
 - João da Silva   
 - João Pereira

Exemplo Minha Situação Real:
Barra de Pesquisa: 0067
 - 0067 - Ovo de Codorna

I wish it were something like that:

Exemplo Generalista:
Barra de Pesquisa: João;Rafaela;Caio
resultado:
 - Caio Augusto Sitta
 - Rafaela Abjur
 - Igor Pereira Caio
 - João da Silva   
 - João Pereira

Exemplo Minha Situação Real:
Barra de Pesquisa: 0067;1829;0502
resultado:
 - 0067 - Ovo de Codorna
 - 1829 - Batata Congelada
 - 0502 - Salgadinho Dórime

I looked on the Internet but I couldn’t find anything more common, if someone could give me a light, however small it was I would be very grateful!

edit1: I was asked for some more information, I will pass them below:

(most of these codes were not I who did)

Current search bar code (JS):

$(document).ready(function(){
  $("#input_carteira").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#id_carteira li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

HTML code

<div class="modal-body">
    <input class="form-control form-rounded mb-3 mr-3" id="input_carteira" 
    type="text" placeholder="Procurar.."> {% render_field form.carteira %}
</div>

Thank you very much!

Answer 1

Hello! You can read the whole string from your input and separate by ; using the split of the JS.

Then it would be something like this:

const suaStringDeBusca = "0942;9423;2423;"
suaStringDeBusca.split(";") <- agora você tem um array com todos os seus campos de busca.
suaStringDeBusca.forEach(busca => metodoDeValidação(busca))

It would just iterate this array with some repetition method (Ex: foreach, map) and return this search to this field where you show the options that the guy typed.

Answer 2

Follow an example code that came to my head to guide you

const searchInput = document.getElementById('search');
const searchTerms = document.getElementById('searchTerms');

searchInput.addEventListener('input', onInputSearch, false);
searchTerms.addEventListener('click', onRemoveSearchTerm, false);

// Regex para verificar se há 1 ou mais espaços no fim do valor do input
const hasSpace = /(\s+)$/g;
function onInputSearch(event) {
  const value = event.target.value;
  /* 
    Teste com a regex e se houver 1 ou mais espaços no fim do valor, 
    adiciono o termo na lista e limpo o input para inserção de novos termos
  */
  if (hasSpace.test(value)) {
    addSearchTerm(value);
    searchInput.value = '';
  }
}

// Crio um item na lista com um botão para remove-lo
function addSearchTerm(term) {
  const li = document.createElement('li');
  li.appendChild(document.createTextNode(term));
  const button = document.createElement('button');
  button.appendChild(document.createTextNode('X'));
  button.classList.add('remove-search-term');
  li.appendChild(button);
  searchTerms.appendChild(li);
}

function onRemoveSearchTerm(event) {
  // Verifico se o click é de um button para remover item da lista
  if (event.target.classList.contains('remove-search-term')) {
    searchTerms.removeChild(event.target.parentNode);
  }
}

<input id="search" type="text" />
<ul id="searchTerms">
</ul>