Добавить несколько идентификаторов - окно поиска - PullRequest
Новая
       1

Добавить несколько идентификаторов - окно поиска

0 голосов
/ 27 мая 2020

У меня создано три файла ol, но при добавлении поиска он не работает .. Не могли бы вы проверить, в чем проблема? 

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

<ol id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Bob</a></li>
</ol>

<ol id="myUL2">
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
</ol>

<ol id="myUL3">
  <li><a href="#">Anim</a></li>
  <li><a href="#">Bitto</a></li>
  <li><a href="#">Cindy</a></li>
</ol>

Скрипт, который я использую, приведен ниже: 

function myFunction() {
    var input, filter, ol, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ol = document.querySelectorAll("#myUL,#myUL2,#myUL3");
    li = ol.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

В чем проблема кода?

1 Ответ

0 голосов
/ 27 мая 2020

Я использую эту строку, чтобы получить все элементы списка из упорядоченного списка.

li = document.querySelectorAll("ol li");

console.clear();

function myFunction() {
    var input, filter, ol, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    li = document.querySelectorAll("ol li");

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ol id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Bob</a></li>
</ol>

<ol id="myUL2">
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
</ol>

<ol id="myUL3">
  <li><a href="#">Anim</a></li>
  <li><a href="#">Bitto</a></li>
  <li><a href="#">Cindy</a></li>
</ol>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...