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

https://forum.jquery.com/topic/append-element-that-contains-user-entry-to-the-top-of-a-list#14737000006519265

by Akram kamal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
    <from action="#">
        <input type="text" id="sort-plate" />
        <input type="button" id="clicker" value="search" />
        <div id="show-here">Resul</div>
        </form>
        <br />
        <br />
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angelina Jolie</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Michael Jordan</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Deka Junior</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angela Jones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong>...

CSS

.name, .center, .phone {
    font-size: 14px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.name {
    width: 55%
}
.center, .phone {
    width: 20%;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}

JavaScript

$(function () {
    $('#clicker').click(function () {
        var plate = new RegExp($('#sort-plate').val(),"i");
        console.log($('#sort-plate'), plate)

        $('.sort-plate').filter(function () {
            return $(this).text().match(plate)
        }).appendTo('#show-here');
        
        return false

    });




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

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

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

});