Javascript卡片搜索过滤卡片概览页面

Question

因此，我目前正在构建一个包含许多卡片的概览页面，其中包括路线名称、路线数量、起点和日期等数据。现在我尝试使用 javascript 构建一个过滤器，用户可以在其中过滤路线名称、路线数量、起点和日期，以便用户可以搜索特定卡。

目前我有 6 张带有数据的卡片，当我在搜索输入字段中输入时，它只会删除前 4 张卡片并显示最后 2 张。

• 我使用了一些不必要的类名，例如 route__text，这些只是为了尝试修复我的搜索过滤器。

我的代码：

非常感谢您的帮助

const input = document.getElementById('search');
input.addEventListener('keyup', search);

function search() {
  const inputValue = input.value;
  console.log(inputValue.toLowerCase());
  const routeContainer = document.getElementById('route');
  const routeDetail = routeContainer.getElementsByClassName('route__filter');
  console.log(routeDetail);

  for(let i = 0; i < routeDetail.length; i++) {
    let searchTerm = routeDetail[i].querySelectorAll(".route__parent td.route__text");
    // console.log(typeof searchTerm);
    
    for(let i = 0; i < searchTerm.length; i++) {
      let correctSearch = searchTerm[i];
      console.log(correctSearch.innerHTML.toLocaleLowerCase());
      if (correctSearch.innerHTML.toLowerCase().includes(inputValue.toLowerCase())) {
        routeDetail[i].style.display = "";
      } else {
        routeDetail[i].style.display = "none";
      }
    }
  } 
}
search();

<div class="route" id="route">
                <div class="row">
                    <div class="col-12 d-flex justify-content-end mb-4">
                        <input type="search" id="search" name="gsearch" placeholder="Search">
                    </div>
                    <div class="col-lg-6 route__filter">
                        <div class="route__details">
                            <table class="route__table">
                                <tr>
                                    <th>Route name</th>
                                    <th>Stops</th>
                                    <th>Starting point</th>
                                    <th>Date</th>
                                </tr>
                                <tr class="route__parent">
                                    <td class="route__text">Route one</td>
                                    <td class="route__text">3</td>
                                    <td class="route__text">City one</td>
                                    <td class="route__text">20-09-2021</td>
                                </tr>
                            </table>
                            <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                        </div>
                    </div>
                    <div class="col-lg-6 route__filter"> 
                        <div class="route__details">
                            <table class="route__table">
                                <tr>
                                    <th>Route name</th>
                                    <th>Stops</th>
                                    <th>Starting point</th>
                                    <th>Date</th>
                                </tr>
                                <tr class="route__parent">
                                    <td class="route__text">Route two</td>
                                    <td class="route__text">3</td>
                                    <td class="route__text">City two</td>
                                    <td class="route__text">20-09-2021</td>
                                </tr>
                            </table>
                            <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                        </div>
                    </div>
                    <div class="col-lg-6 route__filter">
                        <div class="route__details">
                            <table class="route__table">
                                <tr>
                                    <th>Route name</th>
                                    <th>Stops</th>
                                    <th>Starting point</th>
                                    <th>Date</th>
                                </tr>
                                <tr class="route__parent">
                                    <td class="route__text">Route three</td>
                                    <td class="route__text">3</td>
                                    <td class="route__text">City three</td>
                                    <td class="route__text">20-09-2021</td>
                                </tr>
                            </table>
                            <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                        </div>
                    </div>
                    <div class="col-lg-6 route__filter">
                        <div class="route__details">
                            <table class="route__table">
                                <tr>
                                    <th>Route name</th>
                                    <th>Stops</th>
                                    <th>Starting point</th>
                                    <th>Date</th>
                                </tr>
                                <tr class="route__parent">
                                    <td class="route__text">Route four</td>
                                    <td class="route__text">3</td>
                                    <td class="route__text">City four</td>
                                    <td class="route__text">20-09-2021</td>
                                </tr>
                            </table>
                            <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                        </div>
                    </div>
                    <div class="col-lg-6 route__filter">
                        <div class="route__details">
                            <table class="route__table">
                                <tr>
                                    <th>Route name</th>
                                    <th>Stops</th>
                                    <th>Starting point</th>
                                    <th>Date</th>
                                </tr>
                                <tr class="route__parent">
                                    <td class="route__text">Route five</td>
                                    <td class="route__text">5</td>
                                    <td class="route__text">City five</td>
                                    <td class="route__text">21-09-2021</td>
                                </tr>
                            </table>
                            <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                        </div>
                    </div>
                    <div class="col-lg-6 route__filter">
                        <div class="route__details">
                            <table class="route__table">
                                <tr>
                                    <th>Route name</th>
                                    <th>Stops</th>
                                    <th>Starting point</th>
                                    <th>Date</th>
                                </tr>
                                <tr class="route__parent">
                                    <td class="route__text">Route six</td>
                                    <td class="route__text">3</td>
                                    <td class="route__text">City six</td>
                                    <td class="route__text">20-09-2021</td>
                                </tr>
                            </table>
                            <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                        </div>
                    </div>
                </div>
            </div>

Answer 1

下面的代码可以工作...您的代码很容易编辑并指出错误，但总的来说您应该注意以下几点：

1. 注意 HTML 集合、数组和节点列表之间的区别
2. 避免嵌套 for 循环，因为它们令人困惑且难以理解。如果您确实需要使用它，请不要使用相同的变量名（在您的情况下为 i），因为这会使解释器和其他程序员感到困惑。
3. keyup 事件触发不必要的 search 在没有输入时调用（即 shift 或 caps press）

document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('search');
    input.addEventListener('input', search);

})

const search = (e) => {
  const inputValue = e.target.value;
  // console.log(`inputValue: ${inputValue.toLowerCase()}`);

  const routeContainer = document.getElementById('route');
  const routeDetail = [...routeContainer.getElementsByClassName('route__filter')];
  // console.log(routeDetail);

  for(let i = 0; i < routeDetail.length; i++) {
    let searchTerm = [...routeDetail[i].querySelectorAll(".route__parent td.route__text")];
    searchTerm = [...searchTerm.map((item) => item.innerHTML)];
    
    if (searchTerm.map(text => text.includes(inputValue)).some(val => val == true)){
      routeDetail[i].style.display = 'block'
    } else {
      routeDetail[i].style.display = 'none'
    }
  } 
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./test.js"></script>
    <title>Document</title>
</head>
<body>
    
    <div class="route" id="route">
        <div class="row">
            <div class="col-12 d-flex justify-content-end mb-4">
                <input type="search" id="search" name="gsearch" placeholder="Search">
            </div>
            <div class="col-lg-6 route__filter">
                <div class="route__details">
                    <table class="route__table">
                        <tr>
                            <th>Route name</th>
                            <th>Stops</th>
                            <th>Starting point</th>
                            <th>Date</th>
                        </tr>
                        <tr class="route__parent">
                            <td class="route__text">Route one</td>
                            <td class="route__text">3</td>
                            <td class="route__text">City one</td>
                            <td class="route__text">20-09-2021</td>
                        </tr>
                    </table>
                    <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                </div>
            </div>
            <div class="col-lg-6 route__filter"> 
                <div class="route__details">
                    <table class="route__table">
                        <tr>
                            <th>Route name</th>
                            <th>Stops</th>
                            <th>Starting point</th>
                            <th>Date</th>
                        </tr>
                        <tr class="route__parent">
                            <td class="route__text">Route two</td>
                            <td class="route__text">3</td>
                            <td class="route__text">City two</td>
                            <td class="route__text">20-09-2021</td>
                        </tr>
                    </table>
                    <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                </div>
            </div>
            <div class="col-lg-6 route__filter">
                <div class="route__details">
                    <table class="route__table">
                        <tr>
                            <th>Route name</th>
                            <th>Stops</th>
                            <th>Starting point</th>
                            <th>Date</th>
                        </tr>
                        <tr class="route__parent">
                            <td class="route__text">Route three</td>
                            <td class="route__text">3</td>
                            <td class="route__text">City three</td>
                            <td class="route__text">20-09-2021</td>
                        </tr>
                    </table>
                    <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                </div>
            </div>
            <div class="col-lg-6 route__filter">
                <div class="route__details">
                    <table class="route__table">
                        <tr>
                            <th>Route name</th>
                            <th>Stops</th>
                            <th>Starting point</th>
                            <th>Date</th>
                        </tr>
                        <tr class="route__parent">
                            <td class="route__text">Route four</td>
                            <td class="route__text">3</td>
                            <td class="route__text">City four</td>
                            <td class="route__text">20-09-2021</td>
                        </tr>
                    </table>
                    <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                </div>
            </div>
            <div class="col-lg-6 route__filter">
                <div class="route__details">
                    <table class="route__table">
                        <tr>
                            <th>Route name</th>
                            <th>Stops</th>
                            <th>Starting point</th>
                            <th>Date</th>
                        </tr>
                        <tr class="route__parent">
                            <td class="route__text">Route five</td>
                            <td class="route__text">5</td>
                            <td class="route__text">City five</td>
                            <td class="route__text">21-09-2021</td>
                        </tr>
                    </table>
                    <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                </div>
            </div>
            <div class="col-lg-6 route__filter">
                <div class="route__details">
                    <table class="route__table">
                        <tr>
                            <th>Route name</th>
                            <th>Stops</th>
                            <th>Starting point</th>
                            <th>Date</th>
                        </tr>
                        <tr class="route__parent">
                            <td class="route__text">Route six</td>
                            <td class="route__text">3</td>
                            <td class="route__text">City six</td>
                            <td class="route__text">20-09-2021</td>
                        </tr>
                    </table>
                    <img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
                </div>
            </div>
        </div>
    </div>
</body>
</html>