无法在 JavaScript 中过滤项目

Question

因此，我正在尝试为此商店列表创建一个过滤器，因此只有内容等于输入框值的商店才会显示。不幸的是，我的过滤器无法正常工作。一方面，我在输入框中输入的任何内容都会导致我的所有商店元素添加“显示”类，这会导致我的项目接收样式“显示：无；”。其次，它不会在每次按下键时更新。

HTML：

                 <li class="p-3 clearfix store display">

                        <div class='float-left w-50'>

                            <div class='mb-1'><strong>Store Number:</strong><span class="store-info">

                                <?php

                                if (strlen($row['store_num']) < 4) {

                                    if (strlen($row['store_num']) == 3) {
                                        echo '0' . $row['store_num'];
                                    } else if (strlen($row['store_num']) == 2) {
                                        echo '00' . $row['store_num'];
                                    }

                                } else {
                                    echo $row['store_num'];
                                }

                                ?>

                            </span></div>

                            <div class='mb-1'><strong>Store Name:&nbsp;</strong><span class='store-info'><?php echo $row['store_name']; ?></span></div>

                            <div class='clearfix mb-1'>


                                    <p class='float-left'><strong>Address:&nbsp;</strong></p>


                                    <span class='d-block store-info float-left'><?php echo $row['store_street']; ?></span>
                                    <br>
                                  <span class='d-block store-info float-left'><?php echo $row['store_city']; ?>,&nbsp;<?php echo strtoupper($row['store_state']); ?>&nbsp;<?php echo $row['store_zip']; ?></span>


                            </div> <!-- mb-1 -->

                        </div> <!-- float-left -->

                        <div class="float-left w-50 clearfix">

                            <div class="d-inline float-right">

                                <div class='mb-1'>
                                    <strong>Time Zone:&nbsp;</strong><span class='time-zone store-info'><?php echo strtoupper($row['time_zone']); ?></span>
                                </div>

                                <div class='mb-1'>
                                    <strong>Current Time:&nbsp;</strong><time>3:45pm</time>
                                </div>

                                <div class='mb-1'>
                                    <strong>Phone Number:</strong><span class='store-info'>

                                    <?php

                                        $phone = $row['store_phone'];

                                        $area = substr($phone, 0, 3);
                                        $prefix = substr($phone, 4, 3);
                                        $line = substr($phone, 6, 4);

                                        echo '(' . $area . ') ' . $prefix . '-' . $line;

                                     ?>

                                    </span>
                                </div>

                                <div class='mb-1'>
                                    <strong>Fax Number:</strong><span class='store-info'>

                                    <?php

                                        $phone = $row['store_fax'];

                                        $area = substr($phone, 0, 3);
                                        $prefix = substr($phone, 4, 3);
                                        $line = substr($phone, 6, 4);

                                        echo '(' . $area . ') ' . $prefix . '-' . $line;

                                     ?>

                                    </span>
                                </div>

                            </div> <!-- d-inline -->

                        </div> <!-- float-right -->

                    </li> <!-- clearfix -->

JavaScript：

var search = document.getElementById('search');
var stores = document.querySelectorAll('.store');

search.addEventListener('keyup', function (e) {

    var data = e.target.value.toLowerCase();

    stores.forEach(function(store) {

        var spans = document.querySelectorAll('.store-info');

        for(var i = 0; i < spans.length; i++) {
            if (spans[i].innerText.toLowerCase() != data) {
                store.classList.remove('display');
            } else {
                store.classList.add('display');
            }
        }

    });

});

Answer 1

如果我正确理解您的问题，您可以对您的 javascript 进行以下更改以解决您面临的问题。请参阅代码中的 cmets 以了解发生了什么：

search.addEventListener('keyup', function (e) {

    var query = e.target.value.toLowerCase();

    if (search.value.length >= 0) {
        search.classList.add('focused');
        label.classList.add('focused');
    } else {
        search.classList.remove('focused');
        label.classList.remove('focused');
    }

  // recommend performing this query in the keyup event to ensure
  // that you're working with the most up to date state of the DOM
  var stores = document.querySelectorAll(".store");

  stores.forEach(function(store) {

    // query .store-info from current store
    var spans = store.querySelectorAll(".store-info");

    // hide the store by default
    store.style.display = 'none';

    for (var i = 0; i < spans.length; i++) {

      var storeInfoText = spans[i].innerText.toLowerCase();

      // consider revising search logic like so
      if (storeInfoText.indexOf(query) !== -1 || !query) {

        // display the store if some match was found
        store.style.display = 'block';
      }
    }

    });

});

链接到working jsFiddle here

Answer 2

I think your issue with it showing everything is because of the add remove... if a store already has display it will re add it and then only remove it once where as if it doesn’t you will get an error so try toggle 

var search = document.getElementById('search'); var stores = document.querySelectorAll('.store');

 search.addEventListener('keyup', function (e) {

var data = e.target.value.toLowerCase();

stores.forEach(function(store) {

    var spans = document.querySelectorAll('.store-info');

     spans.filter(span=>{
      if(span.innerText.toLowerCase().includes(data)){
       store.classList.toggle('display');


     }else{store.classList.toggle('display')

       })

   });