2013-08-10 4 views
8

Я хочу отфильтровать список без учета регистра. Я хочу совместить только символ, который не соответствует верхнему регистру или нижнему регистру.Список фильтров JQuery без чувствительности к регистру

  1. XXXXXXX
  2. YYYYYYY
  3. ххххх

Если я вхожу "X" в окне поиска отображается как 1 и 3. Я добавил код, приведенный ниже, но соответствовать чувствительны к регистру также.

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
    function filter(element) { 
     var value = $(element).val(); 
     $("#theList > li").each(function() { 
      if ($(this).text().search(value) > -1) { 
       $(this).show(); 
      } 
      else { 
       $(this).hide(); 
      } 
     }); 
    } 
</script> 
</head> 
<body> 
<input type="text" onkeyup="filter(this)" /> 
<ul id="theList"> 
    <li>xxvxvxx</li> 
    <li>yyyyyyyyyy</li> 
    <li>rrrrrrrrrr</li> 
    <li>vvvvvvvvvvv</li> 
    <li>xcvcvdfsdf</li> 
    <li>hkjhkhjkh</li> 
    <li>xzfgfhfgh</li> 
</ul> 

</body> 
</html> 
+0

возможно дубликат [Есть регистронезависимы JQuery: содержит селектор?] (Http://stackoverflow.com/questions/187537/is-there- a-case-insensitive-jquery-contains-selector) –

ответ

15

Вы должны использовать indexOf

$(this).text().search(value) 

должен быть

$(this).text().indexOf(value) 

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

Вы можете использовать jQuery для присоединения к событию.

$('input').keyup(function() { 
    filter(this); 
}); 

function filter(element) { 
    var value = $(element).val().toLowerCase(); 
    $("#theList > li").each(function() { 
     var $this = $(this), 
      lower = $this.text; 
     if (lower.indexOf(value) > -1) { 
      $this.show(); 
     } else { 
      $this.hide(); 
     } 
    }); 
} 

Check Fiddle

Та же функция немного лучше, используя filter

function filter(element) { 
    var value = $(element).val().toLowerCase(); 
    $("#theList > li").hide().filter(function() { 
     return $(this).text().toLowerCase().indexOf(value) > -1; 
    }).show(); 
} 
+0

Возможно ли сделать акцентирующую нечувствительность версию? –

-1

Попробуйте это:

function filter(element) { 
     var value = $(element).val(); 
     $("#theList > li").hide(); 
     $("#theList > li:contains('" + value + "')").show(); 
    } 
5

Просто замените

$(this).text().search(value) > -1 

с:

$(this).text().search(new RegExp(value, "i")) > -1 

и что следует сделать трюк. Вот рабочий FIDDLE

2

Just Add jQuery.expr[":"].contains = function (a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};

Смежные вопросы