Javascriptリストのフィルタコードが1ページで2回動作しない

Question

W3のサンプルコードを使用して、同じページ（別々のdiv内）に2つのフィルタリング可能なJavascriptリストを組み込もうとしています。ここ

リンク：https://www.w3schools.com/howto/howto_js_filter_lists.asp

コードは、最初に濾過リストに取り組んでいます。コードは2番目のリストでは機能していないようです。

問題を表示するために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"; 

     } 
    } 
} 

私は、関数の2つの異なるインスタンスを実行するために、JSを調整する必要がある場合があります考えています。しかし、私は本当に知らない。

ご協力いただきまして誠にありがとうございます。完全なJSの初心者。

Answer 1

あなたの要求に基づいてコードを修正しました。問題は、inputとulタグに同じidを使用していることです。

myInput_#とmyUL_#と置き換えられました。ここで、#は、固有のIDになる番号を表します。また、私は_を使っています。stringがある場合は、split()メソッドを使用して簡単に配列に分解できます。したがって、入力がクリックされたときに数値を抽出し、それを使用して右のul要素を選択することができるということができます。その後myFunctionに、我々はinputを受け、私たちはこのようなindexとしてinput.idから番号を取得することができます

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

：

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

私は myFunction呼び出しで thisを追加する理由である

ここではすべての実装があります。私も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>

Answer 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">

と機能：

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"; 
 

 
    } 
 
} 
 
}

CSS

#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; 
 
}

EDIT：

私は道で同じIDを持つULを考慮していませんでした。ここで働いているペン：それ:)を行う必要があります

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

Answer 3

あなたは、各入力に対して一意であると、使用一覧表示していた（入力者とリストのidを使用して機能を提供する必要があります、あなたは、IDのことでそれらを参照したい場合は、）もちろん：

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"> 

Answer 4

主な問題はここにあるあなたが同じidを持つ複数の要素を宣言していることです。 idのドキュメントを見ると、というユニークな HTML要素が指定されています。私は、変更する必要があることを示すために、以下の実例を提供しました。これはそれを行う方法の1つに過ぎず、他にも多くの方法があります。助けのための

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>