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