如何使用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将属性数据转换为小写？

回答

相关问题