javascript - Return results in a list by a search input -

friends, trying learn how can make 'trivial' search input.. html without consulting database.

i have list of 8 options, , make js function me hide options don't match search.

http://codepen.io/pen/

<div class="search__dropdown">     <div class="search__dropdown-header">         <h3 class="search__dropdown-title">hostel</h3>     </div>     <div class="search__dropdown-body">         <input class="search__dropdown-input search__dropdown-input--search" type="text" placeholder="procure" />         <ul class="search__dropdown-list search__dropdown-list--hostel">             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />                 <label class="search__dropdown-label" for="hostel1">one</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />                 <label class="search__dropdown-label" for="hostel2">two</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />                 <label class="search__dropdown-label" for="hostel3">three</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />                 <label class="search__dropdown-label" for="hostel4">four</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />                 <label class="search__dropdown-label" for="hostel6">five</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />                 <label class="search__dropdown-label" for="hostel7">six</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />                 <label class="search__dropdown-label" for="hostel8">seven</label>             </li>             <li class="search__dropdown-item">                 <input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />                 <label class="search__dropdown-label" for="hostel9">eight</label>             </li>         </ul>     </div> </div> 

1. attach input event trigger every letter change
2. iterate through list items , check if text contains current value
3. if not, hide item

$('.search').on('input', function() {    var search = $(this).val();    var options = $('li:has([name*="hostel"])');    options.each(function() {      $(this).show();      if ($(this).find('[for*="hostel"]').text().indexof(search) < 0) {        $(this).hide();      }    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <div class="search__dropdown">    <div class="search__dropdown-header">      <h3 class="search__dropdown-title">hostel</h3>    </div>    <div class="search__dropdown-body">      <input class="search search__dropdown-input search__dropdown-input--search" type="text" placeholder="procure" />      <ul class="search__dropdown-list search__dropdown-list--hostel">        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />          <label class="search__dropdown-label" for="hostel1">one</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />          <label class="search__dropdown-label" for="hostel2">two</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />          <label class="search__dropdown-label" for="hostel3">three</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />          <label class="search__dropdown-label" for="hostel4">four</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />          <label class="search__dropdown-label" for="hostel6">five</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />          <label class="search__dropdown-label" for="hostel7">six</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />          <label class="search__dropdown-label" for="hostel8">seven</label>        </li>        <li class="search__dropdown-item">          <input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />          <label class="search__dropdown-label" for="hostel9">eight</label>        </li>      </ul>    </div>  </div>