Skip to main content
adicionou 614 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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

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>

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();
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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>