Javascript列表过滤器代码在单页

时间：2017-04-26 03:51:15

标签： javascript jquery html

我尝试使用W3的示例代码在同一页面（在不同的div中）合并两个可过滤的Javascript列表。

此处链接：https://www.w3schools.com/howto/howto_js_filter_lists.asp

代码适用于第一个可过滤列表。代码似乎不适用于第二个列表。

我创建了一个CodePen来显示问题。

https://codepen.io/anon/pen/mmOLVK 

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++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

我想我可能需要调整JS来运行两个不同的函数实例。但我真的不知道。

非常感谢任何帮助。完成JS新手。

4 个答案:

答案 0 :(得分：2)

您使用相同的ID myinput。 Id必须是唯一的。改变它，它应该工作。

您可以通过将id作为选择器传递来修改您的函数：

<input type="text" id="myInput1" onkeyup="myFunction('myInput1')" placeholder="Search for names.." title="Type in a name">

和

<input type="text" id="myInput" onkeyup="myFunction('myInput')" placeholder="Search for names.." title="Type in a name">

和功能：

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

    }
}
}
＆＃13;
＆＃13;
＆＃13; CSS

＆＃13;
＆＃13; 
#myInput,#myInput1 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
＆＃13;
＆＃13;
＆＃13;

编辑：

我没有考虑到那个具有相同ID的ul。这是工作笔：

https://codepen.io/anon/pen/aWBGPE

应该这样做：）

答案 1 :(得分：0)

您需要为您的功能提供输入和列表ID（如果您想通过ID＆＃39;来引用它们，则必须对您使用的每个输入和列表都是唯一的。 s，当然）：

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

从html中调用它：

<input type="text" id="myInput" onkeyup="myFunction('myInput', 'myUL')" placeholder="Search for names.." title="Type in a name">

答案 2 :(得分：0)

我根据您的要求修改了您的代码。问题是您对id和input标记使用相同的ul。

我将其替换为myInput_#和myUL_#，其中#表示使ID唯一的数字。另外，我正在使用_来获取技巧。当您拥有string时，可以使用split()方法将其轻松地分解为数组。因此，诀窍是我们可以从输入中提取数字，点击时，然后我们可以使用它来选择正确的ul元素。

这就是我在this电话中添加myFunction的原因：

<input 
    type="text" 
    id="myInput_1" 
    onkeyup="myFunction(this)" 
    placeholder="Search for names.." 
    title="Type in a name">

然后在myFunction中，我们收到了input，我们可以从input.id获取index这样的数字：

index = input.id.split('_')[1];

这里有你所有的实现。我也修改了CSS。这是source in codepen 

function myFunction(input) {
    var input, filter, ul, li, a, i, index;
    index = input.id.split('_')[1];
    filter = input.value.toUpperCase();
    ul = document.getElementById('myUL_' + index);
    li = ul.getElementsByTagName('li');
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName('a')[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = '';
        } else {
            li[i].style.display = 'none';
        }
    }
}
* {
  box-sizing: border-box;
}

#myInput_1, #myInput_2 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 11px;
  padding: 6px 10px 6px 20px;
  border: 1px solid #ddd;
  margin-bottom: 6px;
}

#myUL_1, #myUL_2 {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL_1 li a, #myUL_2 li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 6px;
  text-decoration: none;
  font-size: 11px;
  color: black;
  display: block
}

#myUL_1 li a.header, #myUL_2 li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

h2 {
  font-size: 12px;
  color:red;
}

h2.fixed {
  color:green;
}
<div id="1">
  <h2>This one works</h2>
<input type="text" id="myInput_1" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">

<ul id="myUL_1">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
</div>

<div id="2">
  <h2 class="fixed">This one doesn't (fixed)</h2>
<input type="text" id="myInput_2" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">

<ul id="myUL_2">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
</div>

答案 3 :(得分：0)

这里的主要问题是您声明具有相同id的多个元素。如果您查看id上的文档，则需要指定唯一 HTML元素。我在下面提供了一个工作示例，以显示需要更改的内容。这只是一种方法，还有很多其他方法可以做到，正如你在其他答案中看到的那样。

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

        }
    }
}
* {
  box-sizing: border-box;
}

.myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

.myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

.myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

.myUL li a:hover:not(.header) {
  background-color: #eee;
}

h2 {
  color:red;
}
<div id="1">
  <h2>This one works</h2>
<input type="text" id="myInput" class="myInput" onkeyup="myFunction('myInput', 'myUL')" placeholder="Search for names.." title="Type in a name">

<ul id="myUL" class="myUL">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
</div>

<div id="2">
  <h2>This one doesn't</h2>
<input type="text" id="myInput2" class="myInput" onkeyup="myFunction('myInput2', 'myUL2')" placeholder="Search for names.." title="Type in a name">

<ul id="myUL2" class="myUL">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
</div>

相关问题
最新问题