Sort checkbox list as user type letter in search box

Question

I am using the below code to sort the check box list. but when we type letter "A" in search box it shows checkbox having letter a in Whole word first as it is first in DOM list.

if no matching result is there it should show complete list alphabetically

requirement is to show first word start with A and second word if A is on second place and so on. Note: li list will be appended dynamically

$('#myInput').on('keyup', function() {
  var query = $(this).val().toLowerCase();
  $('#unit-list li :checkbox').each(function(i, e) {
    if (e.value.indexOf(query) != -1) {
      $(e).closest('li').show();
    } else {
      $(e).closest('li').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control" id="myInput" type="text" placeholder="enter your text">

<ul class="unit_list" id="unit-list">
  <li>
    <label class="checkbox_container">
      <input type="checkbox" class="sr-only single_checkbox" value="albert" id=""/>
      <span class="font12"> Albert</span>
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox_container">
      <input type="checkbox" class="sr-only single_checkbox" value="ram" id=""/>
      <span class="font12"> Ram</span>
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox_container">
      <input type="checkbox" class="sr-only single_checkbox" value="alex" id=""/>
      <span class="font12"> Alex</span>
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox_container">
      <input type="checkbox" class="sr-only single_checkbox" value="alexander" id=""/>
      <span class="font12"> Alexander</span>
      <span class="checkmark"></span>
    </label>
  </li>
</ul>

Example Albert Ram Alex Alexander Result : Albert Alex Alexander Ram