W3School's Example给出了列表中搜索过滤器的示例。 我想知道如何对列表中的多个数据进行搜索过滤。 例如,我不仅要搜索名称,还要搜索年龄和地点。订单基于一个用户首先输入。
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>
答案 0 :(得分:0)
您可以使用此功能:
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";
}
}
&#13;
<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>
&#13;
当|
中的至少一个为负(-1)时,indexOf
位运算符的结果将设置负位。在这种情况下,应隐藏相应的li
。
如果您的浏览器不支持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";
}
}
&#13;
<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>
&#13;