如何根据输入文本搜索显示所有嵌套列表元素？

Question

I'm creating a web application that returns an NBA player's name and jersey number when a user searches for a player (and the match is found).

I can return the name that has been searched, but I cannot return the jersey number.

I've tried setting style.display = true , which works for the name node, but I can't get this to work on the jersey node.

Here's how my HTML has been created with DOM manipulation from a JSON:

 function searchPlayer() { let input, filter, ul, li, playerName, i; input = document.getElementById("search-bar"); filter = input.value.toUpperCase(); li = document.getElementById("player-list").getElementsByTagName("li"); Object.keys(li).forEach(function(name) { playerName = li[name].innerHTML; if (playerName.toUpperCase().indexOf(filter) > -1) { li[name].style.display = true; } else { li[name].style.display = "none"; } }) }

 <div id="player-list-section"> <ul id="player-list"> <li id="player"> <li id="full-name">Alex Abrines</li> <li id="jersey">Jersey: 8</li> </li> <li id="player"> <li id="full-name">Quincy Acy</li> <li id="jersey">Jersey: 13</li> </li> </ul> </div> <input id="search-bar" /> <button onclick="searchPlayer()">Search</button>

I know I can access the child node of player using eg li[name].childNode[1] (which returns the jersey li), but I can't call anything on this, such as .innerHTML or .style.display .

How can I return both the name and the jersey?

Answer 1

You need to use list-item instead of true if you want to show the list items after hidding them using display:none and use .closest(".player") to toggle the display of the parent instead:

if (playerName.toUpperCase().indexOf(filter) > -1) {
  li[name].closest(".player").display = 'block';
} else {
  li[name].closest(".player").display = "none";
}

NOTE 1: You need to validate your structure li can't be a parent of another li , check my updated HTML format.

NOTE 2: You need also to replace the duplicate id by common classes since the identifier must be unique in the same document.

 function searchPlayer() { let input, filter, ul, li, playerName, i; input = document.getElementById("search-bar"); filter = input.value.toUpperCase(); li = document.querySelectorAll("#player-list .full-name"); Object.keys(li).forEach(function(name) { playerName = li[name].innerHTML; if (playerName.toUpperCase().indexOf(filter) > -1) { li[name].closest(".player").style.display = 'list-item'; } else { li[name].closest(".player").style.display = "none"; } }) }

 <input id="search-bar" oninput='searchPlayer()'> <div id="player-list-section"> <ul id="player-list"> <li class="player"> <ul> <li class="full-name">Alex Abrines</li> <li class="jersey">Jersey: 8</li> </ul> </li> <li class="player"> <ul> <li class="full-name">Quincy Acy</li> <li class="jersey">Jersey: 13</li> </ul> </li> </ul> </div>