Javascript example
HTML
<div class="play__search">
<button type="submit" role="button" class="play__search-btn"></button>
<input type="text" id="asd" class="form-control form-control_unbordered play__search-control" onkeyup="searchTeam(this.value.toUpperCase())" placeholder="Search specific teams e.g. “Liverpool” ">
</div>
<div class="row">
<div class="col-sm-6">
<div class="play-team">
<div class="play-team__title" data-toggle="collapse" data-target="#team-1">New York Rangers</div>
<ul class="play-team__list collapse play-team__collapse" id="team-1">
<li class="play-team__item">
<input class="radio-styled" type="radio" name="players" id="player-1">
<label for="player-1" class="play-team__name">Pavel Buchnevich</label>
</li>
<li class="play-team__item">
<input class="radio-styled" type="radio" name="players" id="player-2">
<label for="player-2" class="play-team__name">Jesper Fast</label>
</li>
<li class="play-team__item">
<input class="radio-styled" type="radio" name="players" id="player-3">
<label for="player-3" class="play-team__name">Tanner Glass</label>
</li>
<li class="play-team__item">
<input class="radio-styled" type="radio" name="players" id="player-4">
<label for="player-4" class="play-team__name">Michael Grabner</label>
</li>
<li class="play-team__item">
<input class="radio-styled" type="radio" name="players" id="player-5">
<label for="player-5" class="play-team__name">Brandon Pirri</label>
</li>
<li class="play-team__item">
<input class="radio-styled" type="radio" name="players" id="player-6">
<label for="player-6" class="play-team__name">Jimmy...
JavaScript
var query, isMatch, labels = document.querySelectorAll('.play-team__list label');
function searchTeam(query) {
labels.forEach(label=>{
isMatch = label.textContent.toUpperCase().indexOf(query) !== -1
label.closest('li').style.display = isMatch ? '' : 'none'
})
}