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.