Append element that contains user entry to the top of a list

Append element that contains user entry to the top of a list

I have 300 plus list of items that I'd like to make easier for users to find what they are looking for. I want the element that contains what matches what the user types to move to the top of of the list or into another element at the top. my code looks like below. Any Ideas on how I can achieve that?

See complete code here

   
  1. var $showYourself = $('.sort-plate').text;
  2. var $rollCall = $('input#sort-plate').text;

  3. $('button').click(function () {
  4. if ($showYourself === $rollCall) {

  5. $('.sort-plate').appendTo('#show-here');

  6. }

  7. });



  8. $(function () {

  9. $('.name').html(function (i, html) {

  10. return $.trim(html).replace(/(\w+)$/, '<span class="sort-by">$1</span>');
  11. });

  12. var $sortPlate = $("#plate");
  13. $sortPlate.find(".sort-plate").detach().sort(function (a, b) {
  14. return $(a).find('.sort-by').text().localeCompare($(b).find('.sort-by').text());
  15. }).appendTo($sortPlate);

  16. });