Question

我有多个元素（称为卡片），每个元素都有动态数量的关键字。我想在搜索输入中搜索匹配项。

问题 - 有时功能似乎被打破了，如果我是一个＆＃34; L＆＃34;在我添加一个＆＃34; U＆＃34;它只显示蓝卡。但是＆＃34; L＆＃34;应该是两张牌都匹配并显示它们。

此故障是可重现的。有这样的各种问题。尝试输入＆＃34;经理＆＃34;，如果你只是写第一个字母，将不显示匹配，＆＃34; Ma＆＃34;该卡显示为匹配。

我的功能出了什么问题？

＆＃13;

document.getElementById('cardSearch').addEventListener('input', function(){
    var cards = document.getElementsByClassName('card');
    var input = this.value.toUpperCase().replace(/ +(?= )/g,'').split(' ');
    var search = input.filter(Boolean);
    var noMatch = document.getElementById('noMatch');
    mismatchCount = 0;
    keywords = search.length;
    cardCycle = 0;

    searchCycle();

    //search cycle for every card
    function searchCycle() {
        var cycleMax = cards.length;
        cardMatch = 0;
        valueCycle = 0;

        searchValues();

        if(cardMatch == keywords) {
            cards[cardCycle].classList.remove('hidden');
        } else {
            cards[cardCycle].classList.add('hidden');
            mismatchCount++;
        }

        //check for mismatches - if all cards missmatched, show no matches text
        if(mismatchCount == cards.length) {
            noMatch.classList.remove('hidden');
        } else {
            noMatch.classList.add('hidden');
        }

        cardCycle++;

        if(cardCycle < cycleMax) {
            searchCycle();
        }
    }

    //search cycle for every input string, splitted by space
    function searchValues() {
        var metaData = cards[cardCycle].getAttribute('data-meta').toUpperCase().replace(/\s+/g, '').split(',');

        for(i = 0; i < metaData.length; i++) {
            if(metaData[i].indexOf(search[valueCycle]) > -1) {
                cardMatch++;
            }
        }

        valueCycle++;

        if(valueCycle < keywords) {
            searchValues();
        }
    }
})

＆＃13;

#cardSearch {
  width: 300px;
  padding: 10px;
  margin: 10px 0 20px 0;
}

.card {
  padding: 20px;
  margin-top: 10px;
  color: #fff;
}

.hidden {
  display: none;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

＆＃13;

<header>
  <input id="cardSearch" type="text">
</header>

<span id="noMatch" class="hidden">no match</span>

<div class="card blue" data-meta="Manager, Lumpadau, public">
  <span>Manager, Lumpadau, public</span>
</div>

<div class="card red" data-meta="Worker, Reinde, public">
  <span>Worker, Reinde, public</span>
</div>

<div class="card green" data-meta="Cleaner, Rolls, private">
  <span>Cleaner, Rolls, private</span>
</div>

＆＃13;

Answer 1

ISOWeek.ToDateTime(int year, int week, DayOfWeek dayOfWeek)

在这部分代码中，cardMath不仅在卡上增加，而且在每个找到的新匹配符号上增加。因此，如果卡中只有一个符号“L”，则它会正确计算，但如果有多个“L” - 它会将cardMatch的值设置得太高。

要解决此问题，请在找到卡片中的第一个符号后添加break语句。

for(i = 0; i < metaData.length; i++) {
    if(metaData[i].indexOf(search[valueCycle]) > -1) {
        cardMatch++;
    }
}

这里更新了jsFiddle - https://jsfiddle.net/kupdwj5q/14/

使用indexOf

1 个答案: