Question

我有动态号码列表，可能超过50或100。我正在尝试添加搜索框，该搜索框将搜索数字并突出显示它们，如果数字向下滚动（coz数字大于100），则应向下滚动或突出显示列表的顶部。

我发现了这个：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_list

在上面的链接列表中正在排序并显示过滤结果。但是我想要所有列表，但应突出显示使用CSS搜索的列表。

类似于chrome find。

谢谢

Answer 1

当元素与搜索匹配时，我重复使用了示例代码来添加类。

我只是替换了：

<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
  <marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();" OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">

    <ul id="list">

      <li id="1" style="margin-bottom:80px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
      <li id="2" style="margin-bottom:80px;">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>

    </ul>
  </marquee>
</div>

使用：

if (txtValue.toUpperCase().indexOf(filter) > -1) {
  li[i].style.display = "";
} else {
  li[i].style.display = "none";
}

因此，当元素对应于搜索时，将添加CSS类if (filter != "" && txtValue.toUpperCase().indexOf(filter) > -1) { li[i].classList.add("highlighted"); } else { li[i].classList.remove("highlighted"); }，该类将.highlighted变为黄色。如果某个元素与搜索不匹配或搜索为空，则会删除该类：

background-color

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    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];
        txtValue = a.textContent || a.innerText;
        if (filter!="" && txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].classList.add("highlighted");
        } else {
            li[i].classList.remove("highlighted");
        }
    }
}

* {
  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: 6px 12px 6px 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;
  padding: 6px 12px 6px 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

.highlighted{
  background-color:yellow
}

如何使用CSS使列表可搜索？

1 个答案: