JavaScriptを使用したタグのフィルタ検索属性

Question

検索ボックスがある画像ギャラリーがあります。私は検索ボックスに入力すると、私は、検索がalt属性にdata-title属性、具体的すなわち「フィールドの素晴らしい眺め」とない上で行うことにしたいです。以下のコードは動作しますが、data-title属性ではなく、タグのinnerHTMLを検索します。特定の属性のみを検索するにはどうすればよいですか。

function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("gallery"); 
 
    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"; 
 

 
    } 
 
    } 
 
}

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

 
<ul id="gallery"> 
 

 
    <li> 
 
    <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"><img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a> 
 
    </li> 
 

 
    <li> 
 
    <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> 
 
    </li> 
 

 
    <li> 
 
    <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> 
 
    </li>

Answer 1

あなたは a.getAttribute("data-title").toUpperCase()を使用し、この場合には、その属性の値を返す .getAttribute()機能を使用して、特定の属性にフィルタリングすることができ

が、その後、そのことにより、結果をフィルタリングする例：

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

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for caption" title="Type in a name" value="cow"> 
 

 
<ul id="gallery"> 
 

 
    <li> 
 
    <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"><img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a> 
 
    </li> 
 

 
    <li> 
 
    <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> 
 
    </li> 
 

 
    <li> 
 
    <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> 
 
    </li> 
 

 

 
    <li> 
 
    <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> 
 
    </li> 
 

 

 
    <li> 
 
    <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> 
 
    </li>

希望します。

Answer 2

あなたがHTMLソースに onkeyupのイベントをハードコーディングするので、私は次の2つのパラメータを追加するようにお勧めしたい：

• この：現在の要素
• イベント：イベントオブジェクト

からの変更：

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

へ：

あなたの関数は、2つの引数を受け取ることになりますし、あなたがそれらのoを活用することができます。このように

<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Search for caption" title="Type in a name"> 

：

function myFunction(ele, evt) { 
 
    // 
 
    // get current input value 
 
    // 
 
    var filter = ele.value.toUpperCase(); 
 
    // 
 
    // for each anchor under an li belongint to gallery.... 
 
    // 
 
    document.querySelectorAll("#gallery li a").forEach(function(ele, idx) { 
 
     // 
 
     // get the title data attribute 
 
     // 
 
     var title = ele.dataset.title.toUpperCase(); 
 
     // 
 
     // set the display style 
 
     // 
 
     ele.parentNode.style.display = (title.indexOf(filter) == -1) ? "none" : ""; 
 
    }) 
 
}

<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Search for caption" title="Type in a name"> 
 
<ul id="gallery"> 
 
    <li> 
 
     <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"> 
 
      <img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a> 
 
    </li> 
 
    <li> 
 
     <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"> 
 
      <img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> 
 
    </li> 
 
    <li> 
 
     <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."> 
 
      <img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> 
 
    </li> 
 
</ul>