JQuery динамический CSS Дело селектор Нечувствительность

Question

Я ищу способ, чтобы динамически увидеть, если IMG имеет альт тег, содержащий строку, введенную пользователем все работает, но я хотел бы сделать это регистронезависимы для удобства

мой PHP

<div class="box"> 
<div class="box-heading"><span><?php echo $heading_title; ?></span> <input type="text"  id="refine" placeholder="refine"></div> 
<div class="box-content"> 
<div class="box-category"> 
    <ul class="manufacturers"> 
    <?php foreach ($manufacturers as $manufacturer) { ?> 
    <li class="manufacturer" > 
     <a href="<?php echo $manufacturer['href']; ?>"> 
     <img src="<?php echo $manufacturer['image']; ?>" alt="<?php echo $manufacturer['name']; ?>" /> 
     </a> 
    </li> 
    <?php } ?> 
    </ul> 
</div> 

и JQuery

<script> 
$("#refine").keyup(function() { 
var filter = $(this).val().toLowerCase(); 
if(filter) { 
    $matches = $('.manufacturer a img[alt*=' + filter + '] '); 
    console.log($matches); 
    $('.manufacturer a img').not($matches).slideUp(); 
    $matches.slideDown(); 
} else { 
    $('.manufacturer a img').slideDown(); 
    } 
    return false; 

}); 
</script> 

Я хотел бы сохранить заглавную букву производителя в разметке.

Answer 1

Чтобы как сохранить капитализацию в атрибуте alt и заставить его работать, вы могли бы обеспечить более низкий вариант случая в другой атрибут как так:

<div class="box"> 
<div class="box-heading"><span><?php echo $heading_title; ?></span> <input type="text"  id="refine" placeholder="refine"></div> 
<div class="box-content"> 
<div class="box-category"> 
    <ul class="manufacturers"> 
    <?php foreach ($manufacturers as $manufacturer) { ?> 
    <li class="manufacturer" > 
     <a href="<?php echo $manufacturer['href']; ?>"> 
     <img src="<?php echo $manufacturer['image']; ?>" alt="<?php echo $manufacturer['name']; ?>" data-filter="<?php echo strtolower($manufacturer['name']); ?>" /> 
     </a> 
    </li> 
    <?php } ?> 
    </ul> 
</div> 

И Javascript

<script> 
$("#refine").keyup(function() { 
var filter = $(this).val().toLowerCase(); 
if(filter) { 
    $matches = $('.manufacturer a img[data-filter*=' + filter + '] '); 
    console.log($matches); 
    $('.manufacturer a img').not($matches).slideUp(); 
    $matches.slideDown(); 
} else { 
    $('.manufacturer a img').slideDown(); 
    } 
    return false; 

}); 
</script>