Question

我有一个带搜索框的图片库。当我在搜索框中输入内容时，我希望在data-title属性上进行搜索，特别是即“一个很棒的字段视图”和 not <{1}}属性上的。下面的代码有效，但它会搜索标记的alt而不是innerHTML属性，具体如何，我如何仅搜索特定属性。

data-title

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

Answer 1

您可以使用.getAttribute()函数过滤特定属性，该函数返回该属性的值，在这种情况下您使用a.getAttribute("data-title").toUpperCase()，然后按结果筛选结果，例如：

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 事件，我建议你添加以下两个参数：

this：当前元素
event：事件对象

更改自：

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

为：

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

使用JavaScript过滤标记的搜索属性

2 个答案: