Как преобразовать данные атрибутов в нижний регистр, используя только JavaScript?

Question

Я пытаюсь сделать автоматический поиск. Его работа прекрасная вещь, которую я хочу улучшить, - это верхний и нижний регистр. У меня есть ниже li список

<input type="text" id="filter-search" /> 

<ul> 
    <li filter-value="One Is">One Is (Uppercase)</li> 
    <li filter-value="one is">one is (Lowercase)</li> 
    <li filter-value="two">Two</li> 
    <li filter-value="three">Three</li> 
    <li filter-value="four">Four</li> 
    <li filter-value="five" >Five</li> 
    <li filter-value="six">Six</li> 
    <li filter-value="seven">Seven</li> 
    <li filter-value="eight">Eight</li> 
    <li filter-value="nine">Nine</li> 
    <li filter-value="ten" >Ten</li> 
</ul> 

---

var inputId  = 'filter-search'; 
var itemsData = 'filter-value'; 
var displaySet = false; 
var displayArr = []; 

function getDisplayType(element) { 
    var elementStyle = element.currentStyle || window.getComputedStyle(element, ""); 
    return elementStyle.display; 
} 

document.getElementById(inputId).onkeyup = function() { 
    var searchVal = this.value.toLowerCase(); 
    var filterItems = document.querySelectorAll('[' + itemsData + ']'); 
    for(var i = 0; i < filterItems.length; i++) { 
     if (!displaySet) { 
      displayArr.push(getDisplayType(filterItems[i])); 
     } 
     filterItems[i].style.display = 'none'; 
     if(filterItems[i].getAttribute('filter-value').toLowerCase().indexOf(searchVal.toLowerCase()) >= 0) { 
      filterItems[i].style.display = displayArr[i];  
     } 
    } 
    displaySet = true; 
} 

Первый li не найден, потому что он имеет верхнее значение случай, здесь code (его мало линия) Может кто-нибудь любезно наставит меня, что, как я могу исправить проблема. Я хотел бы оценить.

Answer 1

Если вы хотите сделать поиск без учета регистра, преобразовать обе строки в нижний регистр перед сравнением:

if(filterItems[i].getAttribute('filter-value').toLowerCase().indexOf(searchVal) >= 0) { 

Вы могли бы, конечно, оптимизировать, установив значение атрибута DATA- в нижнем регистре значения на сервер.

Answer 2

Вы можете использовать .toUpperCase() при сравнении:

if(filterItems[i].getAttribute('filter-value').toUpperCase().indexOf(searchVal.toUpperCase()) >= 0) { 

https://jsfiddle.net/jf5zkuh4/4/

Answer 3

Вы можете использовать метод toLowerCase() на любой строке.

Пример использования этого:

var string = elem.getAttribute('filter-value'); // One Is 
string = string.toLowerCase(); // one is 

Answer 4

Вам нужно сделать поиск чувствителен к регистру для того, чтобы получить первые значения

var inputId  = 'filter-search'; 
var itemsData = 'filter-value'; 
var displaySet = false; 
var displayArr = []; 

function getDisplayType(element) { 
    var elementStyle = element.currentStyle || window.getComputedStyle(element, ""); 
    return elementStyle.display; 
} 

document.getElementById(inputId).onkeyup = function() { 
    var searchVal = this.value.toLowerCase(); 
    var filterItems = document.querySelectorAll('[' + itemsData + ']'); 
    for(var i = 0; i < filterItems.length; i++) { 
     if (!displaySet) { 
      displayArr.push(getDisplayType(filterItems[i])); 
     } 
     filterItems[i].style.display = 'none'; 
     var prop = filterItems[i].getAttribute('filter-value').toLowerCase(); 
     if(prop.indexOf(searchVal) >= 0) { 
      filterItems[i].style.display = displayArr[i];  
     } 
    } 
    displaySet = true; 
} 

Answer 5

Измените, если условие, как показано ниже:

if(filterItems[i].getAttribute('filter-value').toLowerCase().indexOf(searchVal) >= 0) {