2

Tenho o mecanismo de busca em JavaScript abaixo. O problema é que quando escrevo a palavra "tomato" ele busca a palavra "tomatoes". Provavelmente é um problema de sensibilidade ou está pegando apenas parte da palavra digitada. Seria possível corrigir isso usando apenas JavaScript ou jQuery?

$("#box").on('keyup', function() {
   var matcher = new RegExp($(this).val(), 'gi');
	$('.connect-cat').show().not(function() {
	   return matcher.test($(this).find('.name, .category').text())
    }).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder='Search' id='box' type='text' />
<div style='clear:both;'></div>
			
<div class='connect-cat'>
	<span class='name'>tomatoes</span>
</div>
			
<div class='connect-cat'>
	<span class='name'>tomato</span>
</div>
   
<div class='connect-cat'>
	<span class='name'>apple</span>
</div>

2 Respostas 2

1

O retorno que você espera da função dentro do .not() deve ser um elemento, um seletor ou uma array (documentação do .not()). Da forma que está, o retorno está sendo um booleano true ou false, que não tem efeito no método.

Altere o return para um ternário que devolverá o próprio elemento (se a condição for true) ou null (se for false). Ou seja, devolvendo o próprio elemento, ele não sofrerá o .hide() posterior.

return matcher.test($(this).find('.name, category').text()) ? $(this) : null;

Em relação à busca, há duas formas de resolver isso:

1. Usando .test():

Retire a flag g (global), porque o comportamento desta flag com .test e .exec é diferente de .match (documento para ter uma noção disso).

$("#box").on('keyup', function(){
   var matcher = new RegExp($(this).val(), 'i');
   $('.connect-cat').show().not(function(){
       return matcher.test($(this).find('.name, category').text()) ? $(this) : null;
   }).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder='Search' id='box' type='text' />
<div style='clear:both;'></div>
<div class='connect-cat'>
   <span class='name'>tomatoes</span>
</div>
   
<div class='connect-cat'>
   <span class='name'>tomato</span>
</div>

<div class='connect-cat'>
   <span class='name'>tomatos</span>
</div>

<div class='connect-cat'>
   <span class='name'>apple</span>
</div>

2. Usando .match():

$("#box").on('keyup', function(){
   var matcher = new RegExp($(this).val(), 'gi');
   $('.connect-cat').show().not(function(){
      return $(this).find('.name, category').text().match(matcher) ? $(this) : null;
   }).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder='Search' id='box' type='text' />
<div style='clear:both;'></div>
<div class='connect-cat'>
   <span class='name'>tomatoes</span>
</div>
   
<div class='connect-cat'>
   <span class='name'>tomato</span>
</div>

<div class='connect-cat'>
   <span class='name'>tomatos</span>
</div>

<div class='connect-cat'>
   <span class='name'>apple</span>
</div>

Edit

Só para reforçar e ao contrário o que afirma a outra resposta, a flag g TEM SIM A VER com a forma que o .test() trabalha, conforme pode-se ver nesta documentação, que informo novamente. Me parece que o nosso amigo da outra resposta não leu, ou leu e não entendeu.

Também conforme esta resposta no SOen:

When you use a global flag on a JS RegExp the "test" and "exec" methods each halt at the first match but keep a pointer to where they stopped searching in the string. That pointer can be inspected on the lastIndex property. When you call "test" or "exec" again it begins searching for a match starting at the lastIndex.

So, when you test a RegExp on a string that matches the entire string the lastIndex is set to the end of the string. The next time you test it starts at the end of the string, returns false, and sets lastIndex back to zero.

Tradução livre:

Quando você usa a flag global (g) em um regex de JavaScript, ambos os métodos "test" e "exec" param na primeira correspondência e mantêm essa posição na busca pela string. Essa posição pode ser verificada na propriedade lastIndex. Quando você chama o "teste" ou "exec" novamente, a busca irá iniciar da última posição verificada (cito: isso explica o mau funcionamento que estava ocorrendo).

Logo, quando você testa um RegExp numa string que irá casar toda a string, o lastIndex será no final da string. A próxima vez que você testar, irá iniciar no final da string, retornando false, e redefinindo o lastIndex de volta a zero.

0

A maneira que usou regex

new RegExp($(this).val(), 'gi');

Com certeza o uso de regex assim vai dar problema sempre, pois você não tem controle sobre valor de val()

Inclusive o problema de "tomato" encontrar "tomatoes" é porque não existe os "delimitadores" ^ e $ no começo e fim da regex, e só pra constar, o problema não tem nada haver com o modificador g.

Fora que é muita complexidade sem necessidade, bastaria usar .toLowerCase em ambos valores comparados, exemplo:

$("#box").on('keyup', function() {
    var matcher = $(this).val().toLowerCase();

	$('.connect-cat').show().not(function() {
	   return matcher == $(this).find('.name, .category').text().toLowerCase()
    }).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder='Search' id='box' type='text' />
<div style='clear:both;'></div>
			
<div class='connect-cat'>
	<span class='name'>tomatoes</span>
</div>
			
<div class='connect-cat'>
	<span class='name'>tomato</span>
</div>
   
<div class='connect-cat'>
	<span class='name'>apple</span>
</div>


Se a intenção for buscar palavras que comecem com o que foi digitado pode usar .indexOf() == 0

var matcher = $(this).val().toLowerCase();

$('.connect-cat').show().not(function() {
   return matcher.indexOf( $(this).find('.name, .category').text().toLowerCase() ) == 0
}).hide();

Se a intenção for buscar palavras que contenham parte do que foi digitado pode usar .indexOf() != -1

var matcher = $(this).val().toLowerCase();

$('.connect-cat').show().not(function() {
   return matcher.indexOf( $(this).find('.name, .category').text().toLowerCase() ) != -1
}).hide();
3
  • @dvd então você pensa geralmente em votar pelas pessoas e pela empatia que tem por elas e não pelo conteúdo e qualidade do conteúdo? Interessante saber.
    – Syzoth
    Commented 10/05/2018 às 5:14
  • @dvd aonde exatamente não esta funcionando, eu ficaria muito grato se explicasse aonde falhou, será que é diferença no Firefox, ou falhou no Internet explorer?
    – Syzoth
    Commented 10/05/2018 às 5:15
  • @dvd O que eu respondi foi o que entendi do que o AP queria (que na verdade não esta muito claro), eu entendi que não deveria aparecer tomatoes quando digitar tomato, então me parece que a palavra digitada teria que ser exata, mas se não vou isso eu vou aceitar sua critica sim, pois se o entendimento foi errado da minha parte é muito justo e louvável criticar e receber criticas ;)
    – Syzoth
    Commented 10/05/2018 às 5:19

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 .