-1

Olá! Meu nome é Caio e eu sou leigo no quesito JS, ainda estou aprendendo.

Estou com um desafio que é construir uma barra de pesquisa que busque várias "palavras-chaves", na mesma barra e retorne cada resultado respectivo daquela pesquisa de uma vez só.

Exemplos:

Hoje minha barra filtra 1 "palavra-chave" por vez:

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

Eu gostaria que fosse algo assim:

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

Procurei na internet mas não achei nada além da comum, se alguém poder me dar uma luz, por menor que fosse iria ficar muito agradecido!

edit1: Me pediram mais algumas informações, as passarei abaixo:

(maioria desses códigos não foram eu que fiz)

Código da barra de pesquisa atual(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)
    });
  });
});

Código HTML

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

Desde já muito obrigado!

1
  • 1
    coloca na pergunta o código que já fez até agora 18/01/2021 às 18:49

2 Respostas 2

0

Olá! Você pode ler a string toda do seu input e separar pelo ; utilizando o split do JS.

Então seria algo assim:

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

Seria só iterar esse array com algum metodo de repetição (Ex: forEach, map) e voltar essa busca pra esse campo onde você mostra as opções que o cara digitou.

0

Segue um código de exemplo que me veio a cabeça para te orientar

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .