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

Question

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?

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

    $('#clicker').click(function () {
        if ($showYourself === $rollCall) {

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

        }

    });



$(function () {

    $('.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);

});

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

<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="submit" />
        <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> Ikechukwu Adaora</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:44

You can use a :contains() selector if you don't mind it being case-sensitive. Something along the lines of:

    $('input[type=button]').click(function () {
        var value = $('input#sort-plate').val();

        var match = $(".name:contains(" + value + ")");
        if (match.length) {
            $(".sort-plate").first().before(match.first().parent());
        }
    });

To get at a case-insensitive match you'd need a custom filter, and can listen to keyup on the original input:

    $('input#sort-plate').keyup(function () {
        var value = $('input#sort-plate').val();

        var match = $(".name").filter(function() {
            // don't do this -> return $(this).text().match(new RegExp(value, "i"));
            return $(this).text().toLowerCase().indexOf(value) !== -1;
        });
        if (match.length) {
            $(".sort-plate").first().before(match.first().parent());
        }
    });

You might want to do some prefiltering on the value though, otherwise you might get unexpected results out of the new RegExp constructor

Edit: This question has a better way of matching it, without using a RegExp: JavaScript: case-insensitive search

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

    $('input[type=button]').click(function () {
        var value = $('input#sort-plate').val();

        var match = $(".sort-plate:contains(" + value + ")");
        if (match.length) {
            $(".sort-plate").first().before(match.first());
        }
    });



$(function () {

    $('.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);

});

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

<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" value="submit" />
        <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> Ikechukwu Adaora</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
</div>

Is there a way to make it not to be case sensitive, and can it show up without a click? — Sleek Geek, Oct 21 '15 at 08:41

score -1 · Answer 2 · answered Oct 21 '15 at 07:11

This looks like something you want to use a library for. Since you are not using a table (which usually is the way to go for sortable & searchable data), but some kind of "sort-plates", I recently came across this library which might be exactly what you're looking for: http://isotope.metafizzy.co/

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

2 Answers2