用JQuery做一個搜索過濾器？

Question

所以我有一個由一些json數據制成的表格...

 {
 "AKH":{
 "name": "Amonkhet",
 "code": "AKH"
 "cards": [
{
  "artist": "Izzy",
    "cmc": 3,
    "colorIdentity": [
      "W"
    ],
    "colors": [
      "White"
    ],
    "id": "df3a6e0336684c901358f3ff53ec82ff5d7cdb9d",
    "imageName": "gideon of the trials",
    "layout": "normal",
    "loyalty": 3,
    "manaCost": "{1}{W}{W}",
    "multiverseid": 426716,
    "name": "Gideon of the Trials",
    "number": "14",
    "rarity": "Mythic Rare",
    "subtypes": [
      "Gideon"
    ],
    "text": "+1: Until your next turn, prevent all damage target permanent would deal.\n0: Until end of turn, Gideon of the Trials becomes a 4/4 Human Soldier creature with indestructible that's still a planeswalker. Prevent all damage that would be dealt to him this turn.\n0: You get an emblem with \"As long as you control a Gideon planeswalker, you can't lose the game and your opponents can't win the game.\"",
    "type": "Planeswalker — Gideon",
    "types": [
      "Planeswalker"
    ]
},  

每張卡的“表格”行最終看起來都是這樣。 目前，我僅將ID，卡名和法力消耗附加到每一行

<td><a href="#" onclick="showInfo(this.id)" 
 id="df3a6e0336684c901358f3ff53ec82ff5d7cdb9d">Gideon of the Trials</a></td>

現在，我想搜索這些卡片。 （請記住，列表中將有17,000多種不同的卡片），我可以找到它。.但是我遇到了幾個不同的問題...要么找到了所有問題，但沒有隱藏其余的問題，或隱藏整個列表，僅顯示找到的一張牌。

所以問題A ...我缺少什么才能使搜索正常進行？

 $(document).on('change', 'input[type=checkbox]', function() {
        var lis = $('.cardsRow')

        $('input[type=checkbox]').filter(':checked').each(function(){
                    filterKeyB = $(this).attr('id')
                    filterKeyA = $(this).attr('name')
                    $.each(json, function(setCode, setListing) {
                    $.each(setListing.cards,function(cardNum, cardListing){
                    var x = Object.keys(cardListing)
                    var y = Object.keys(cardListing).map(function (key){
                    return cardListing[key]


                 })
            for (i = 0; (i < x.length); i++) {
            if(x[i] === filterKeyA){
             if (y[i] instanceof Array){
              var holder = y[i]
               var valueArr =[]
             for(var k = 0; k < holder.length; k++){
              valueArr = holder.join('|').toLowerCase().split('|')
              var foundIt = valueArr.includes(filterKeyB)

        }
                }else{
                 var stringy = y[i]
                var stringyA= stringy.toLowerCase().replace(/\s/g, '')
               if (stringyA === filterKeyB){
                var foundIt = true


         } 
        } 
        if(foundIt === true){ 
        $winner = cardListing.name

        for (k = 0; (k < lis.length); k++){
           if (lis[k].innerText.indexOf($winner) != -1) {
            $(lis[k]).show()
           }
        }





  } 
  }
 }        
}) 

問題B ...既然您已經在這里...更好的做法是將可以搜索的數據附加到元素本身？ 也許只是搜索次數最多的（例如“名稱”和“法力”），並且是否有更高級的查詢再次遍歷數據？

Answer 1

我不明白為什么代碼無法正常工作，甚至無法正常工作，它似乎引用了一些示例中未定義的函數。 但我可以與您分享一種非常簡單/直觀的過濾方法，希望您覺得它有用。

本地過濾器方法對於您要嘗試執行的操作非常有用，它接受一個將當前元素作為arg並返回true或false的回調，如果為true，則該元素包含在它生成的新數組中。

但是filter只需要一個函數，並且您有很多過濾器，因此讓我們做一個將多個過濾器Fns組合為一個fn的函數，這樣就可以一次全部傳遞它們：

const combineFilters = (...fns) => val => fns.reduce((prev, curr) => prev || curr(val), false);

OK，如何將過濾器功能的名稱作為鍵存儲在對象中，以便我們可以使用字符串引用它們？ 這樣，我們可以為每個復選框指定一個ID，該ID與應該應用的過濾器功能的名稱相對應，並使事情真正易於實現（並易於閱讀）：

const filterFns = {
    startsWithG(card) {
        return card.name[0] === 'G';
    },
    //etc.
};

好了，該花點時間獲取所有選中的復選框的ID，然后將它們映射到功能數組中。

const filters = $('input[type=checkbox]')
                  .filter(':checked')
                  .map((e, i) => $(i).attr('id'))
                  .get()
                  .map(fnName => filterFns[fnName])

（假設相關數據存儲在名為... data的var中。）我們可以將CombineFilters與過濾器（Fns數組）結合使用以激活所有相關過濾器，然后將匹配對象的結果數組映射到HTML的HTML中選擇。

const matches = data.cards
                    .filter(combineFilters(...filters))
                    .map(card => `<div>${card.name}</div>` );

然后用您的匹配項更新DOM！

正如其他人指出的那樣，如果您需要對對象或數組進行任何更復雜的過濾，那么lodash庫是您的朋友！