Question

我有多个从MySQL数据库填充的卡。我想允许实时搜索根据帐号和用户名过滤卡。我尝试了以下代码，但是没有用。请指教。所使用的JS代码是W3教程中的典型代码，并针对我的代码进行了量身定制。

function Function() {
    // Declare variables
    var input, filter, div, carddiv, acc, name, i;
    input = document.getElementById("BankSearch");
    filter = input.value.toUpperCase();
    div = document.getElementById("Bank-Approval");
 carddiv = div.children();
 
    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < carddiv.length; i++) {
        acc = carddiv[i].getElementsByTagName("div")[0].getElementsByTagName("div")[0].getElementsByTagName("h1")[0];
  name = carddiv[i].getElementsByTagName("div")[1].getElementsByTagName("div")[0].getElementsByTagName("h1")[0];
        if (acc.innerHTML.toUpperCase().indexOf(filter) > -1) {
            carddiv[i].show();
        } else {
    if (name.innerHTML.toUpperCase().indexOf(filter) > -1) {
            carddiv[i].show();
        } else {
   carddiv[i].hide();
        }
        }
    }
}

<div class="tab-content tab-space">
 <div id="Bank-Approval" class="collapse show" data-parent="#accordion" >
<!--Search CODE -->
  <span class="bmd-form-group">
   <div class="input-group">
    <input class="form-control" placeholder="Search" maxlength="100" id="BankSearch" onkeyup="Function()" type="text">  
     <div class="input-group-prepend">
      <span class="input-group-text">       
       <i class="material-icons">search</i>
      </span>
     </div>
   </div>
  </span>
<!--Search CODE -->
<!--1st Card CODE -->
  <div class="card">
   <div class="card-header">
    <div id="Account Number">
     <h1>44444444444</h1>
    </div>
   </div>
   <div class="card-body">
    <div id="Name">
     <h1>XXXXXXX</h1>
    </div>
    <div id="Bank">
     <i src="banklogo/XXX.png"  width="80%" height="80%"></i>
    </div>
    <form >
     <input name="bank" value="XXX" type="hidden">
    </form>
    <button>Add</button>
    <button>Hide</button>
    <div id="Since">
     <h1>2 days ago</h1>
    </div>
   </div>
  </div>
<!--1st Card CODE -->
<!--2nd Card CODE -->
  <div class="card">
   <div class="card-header">
    <div id="Account Number">
     <h1>2222222222</h1>
    </div>
   </div>
   <div class="card-body">
    <div id="Name">
     <h1>YYYYYYY</h1>
    </div>
    <div id="Bank">
     <i src="banklogo/XXX.png"  width="80%" height="80%"></i>
    </div>
    <form >
     <input name="bank" value="XXX" type="hidden">
    </form>
    <button>Add</button>
    <button>Hide</button>
    <div id="Since">
     <h1>4 days ago</h1>
    </div>
   </div>
  </div>
<!--2nd Card CODE -->
 </div>
</div>

例如仅显示两张卡片，将会更多。

Answer 1

看起来您可能在混合使用jQuery语法而不引用它。有不同的处理方法，但是更好的选择可能是按类别名称选择卡片（请参阅带有/ **的其他注释）

function Function() {
  // Declare variables
  var input, filter, div, carddiv, acc, name, i;
  input = document.getElementById("BankSearch");
  filter = input.value.toUpperCase();

  div = document.getElementById("Bank-Approval");
  carddiv = div.getElementsByClassName("card"); //** Select by class

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < carddiv.length; i++) {
    //** Select specific parent element. innerText will return text in child h1.
    acc = carddiv[i].querySelector("[id='Account Number']").innerText;
    name = carddiv[i].querySelector("[id='Name']").innerText;

    if (acc.toUpperCase().indexOf(filter) > -1) {
      carddiv[i].style.display = "block"; //** .hide()/.show() is not supported
    } else {
      if (name.toUpperCase().indexOf(filter) > -1) {
        carddiv[i].style.display = "block";
      } else {
        carddiv[i].style.display = "none";
      }
    }
  }
};

使用JavaScript根据两个变量过滤卡

1 个答案: