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-attribute值设置为小写值来对其进行优化。

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

您需要使搜索大小写不敏感才能获得第一个值

1234567.xml | 1475496840
7878332.xml | 1481188213
etc etc

Answer 5

更改您的if条件如下：

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

如何才能使用JavaScript将属性数据转换为小写？

5 个答案: