如何使用JavaScript將屬性數據轉換爲小寫？

我正在嘗試使自動建議搜索。它的工作很好，我想改善的只是大小寫值。下面我有li列表如何使用JavaScript將屬性數據轉換爲小寫？

<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（其幾號線）任何人都親切地指導我，我該如何解決問題。我想感謝。

來源

2016-10-25 Mr. Developer

@ brso05當然，如果你檢查提供的小提琴，你會看到所有的數據可以通過輸入字段進行搜索，但只有第一個'li'由於具有大寫值而不可搜索。 –

如果你想要做一個區分大小寫的搜索，轉換兩個字符串比較之前爲小寫：

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

你可以，當然，通過對數據 - 屬性值設置爲小寫值優化這個服務器。

來源

2016-10-25 14:07:30

這很有趣。使用'toLowerCase（）'和'toUpperCase（）'幾乎同時發佈了兩個答案：D –

非常感謝，其工作+1 –

比較時，可以使用.toUpperCase()：

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

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

來源

2016-10-25 14:08:01 brso05

非常感謝，它的工作我檢查它，但@JasonP首先發布。我投了票。 –

您可以使用toLowerCase()方法上的任何字符串。

使用此的一個例子：

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

來源

2016-10-25 14:09:46

你需要做搜索不區分大小寫，以便它獲得第一值

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; 
}

來源

2016-10-25 14:11:05

如下更改，如果條件：

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

來源

2016-10-25 14:11:50 oktaydoganer

如何使用JavaScript將屬性數據轉換爲小寫？

回答

相關問題