列表JavaScript中的多个搜索过滤器

Tenz 发表于 Dev

天兹

W3School的示例给出了列表中搜索过滤器的示例。我想知道如何对列表中的1个以上数据进行搜索过滤。例如，我不仅要搜索名称，还要搜索年龄和地点。订单基于哪个用户首先输入。

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    dd = li[i].getElementsByTagName("dd")[0];
    if (dd.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<h2>My Friends</h2>

<input type="text" id="myName" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="myAge" onkeyup="myFunction()" placeholder="Search for ages.." title="Type in a name">
<input type="text" id="myPlace" onkeyup="myFunction()" placeholder="Search for place.." title="Type in a name">

<ul id="myUL">
  <li><dt>Name</dt>
    <dd href="#">Adele</dd><dt>Age</dt>
    <dd>16</dd><dt>Place</dt>
    <dd>New York</dd>
  </li>
  <li><dt>Name</dt>
    <dd href="#">Mary</dd><dt>Age</dt>
    <dd>17</dd><dt>Place</dt>
    <dd>New Jersey</dd>
  </li>
  <li><dt>Name</dt>
    <dd href="#">Belle</dd><dt>Age</dt>
    <dd>19</dd><dt>Place</dt>
    <dd>New Mexico</dd>
  </li>
  <li><dt>Name</dt>
    <dd href="#">Adele</dd><dt>Age</dt>
    <dd>16</dd><dt>Place</dt>
    <dd>Pennsylvania</dd>
  </li>
  <li><dt>Name</dt>
    <dd href="#">Adele</dd><dt>Age</dt>
    <dd>18</dd><dt>Place</dt>
    <dd>New York</dd>
  </li>
</ul>

亭子

您可以使用以下功能：

function myFunction() {
  var i, dd,
      name = document.getElementById("myName").value.toUpperCase(),
      age = document.getElementById("myAge").value.toUpperCase(),
      place = document.getElementById("myPlace").value.toUpperCase(),
      ul = document.getElementById("myUL"),
      li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    dd = Array.from(li[i].getElementsByTagName("dd"), 
            dd => dd.textContent.toUpperCase());
    li[i].style.display = 
        (dd[0].indexOf(name) | dd[1].indexOf(age) | dd[2].indexOf(place)) >= 0
            ? "" : "none";
  }
}

<input type="text" id="myName" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="myAge" onkeyup="myFunction()" placeholder="Search for ages.." title="Type in a name">
<input type="text" id="myPlace" onkeyup="myFunction()" placeholder="Search for place.." title="Type in a name">

<ul id="myUL">
  <li><dt>Name</dt><dd href="#">Adele</dd><dt>Age</dt><dd>16</dd><dt>Place</dt><dd>New York</dd></li>
  <li><dt>Name</dt><dd href="#">Mary</dd><dt>Age</dt><dd>17</dd><dt>Place</dt><dd>New Jersey</dd></li>
  <li><dt>Name</dt><dd href="#">Belle</dd><dt>Age</dt><dd>19</dd><dt>Place</dt><dd>New Mexico</dd></li>
  <li><dt>Name</dt><dd href="#">Adele</dd><dt>Age</dt><dd>16</dd><dt>Place</dt><dd>Pennsylvania</dd></li>
  <li><dt>Name</dt><dd href="#">Adele</dd><dt>Age</dt><dd>18</dd><dt>Place</dt><dd>New York</dd></li>
</ul>

|当至少其中一个indexOf为负数（-1）时，按位运算符的结果将设置为负数位。在这种情况下，li应隐藏相应的内容。

ES5版本

如果您的浏览器不支持ES6（Internet Explorer），请使用此ES5兼容代码：

function myFunction() {
  var i, dd,
      name = document.getElementById("myName").value.toUpperCase(),
      age = document.getElementById("myAge").value.toUpperCase(),
      place = document.getElementById("myPlace").value.toUpperCase(),
      ul = document.getElementById("myUL"),
      li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    dd = Array.prototype.map.call(li[i].getElementsByTagName("dd"), 
            function (dd) { return dd.textContent.toUpperCase() });
    li[i].style.display = 
        (dd[0].indexOf(name) | dd[1].indexOf(age) | dd[2].indexOf(place)) >= 0
            ? "" : "none";
  }
}

<input type="text" id="myName" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="myAge" onkeyup="myFunction()" placeholder="Search for ages.." title="Type in a name">
<input type="text" id="myPlace" onkeyup="myFunction()" placeholder="Search for place.." title="Type in a name">

<ul id="myUL">
  <li><dt>Name</dt><dd href="#">Adele</dd><dt>Age</dt><dd>16</dd><dt>Place</dt><dd>New York</dd></li>
  <li><dt>Name</dt><dd href="#">Mary</dd><dt>Age</dt><dd>17</dd><dt>Place</dt><dd>New Jersey</dd></li>
  <li><dt>Name</dt><dd href="#">Belle</dd><dt>Age</dt><dd>19</dd><dt>Place</dt><dd>New Mexico</dd></li>
  <li><dt>Name</dt><dd href="#">Adele</dd><dt>Age</dt><dd>16</dd><dt>Place</dt><dd>Pennsylvania</dd></li>
  <li><dt>Name</dt><dd href="#">Adele</dd><dt>Age</dt><dd>18</dd><dt>Place</dt><dd>New York</dd></li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。