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()" 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

function searchTeam() {
			// Declare variables
			var input, filter, ul, li, label, i;
			input = document.getElementById('asd');
			filter = input.value.toUpperCase();
			ul = document.getElementsByClassName('play-team__list');
			li = ul.getElementsByTagName('li');

			// Loop through all list items, and hide those who don't match the search query
			for (i = 0; i < li.length; i++) {
				label = li[i].getElementsByTagName("label")[0];
				if (label.innerHTML.toUpperCase().indexOf(filter) > -1) {
					li[i].style.display = "";
				} else {
					li[i].style.display = "none";
				}
			}
		}