Selectable lists & duplicate sorting

example from jQuery: novice to ninja page 296

by beej

HTML

<ul id="tags">
    <li>old</li>
    <li>new</li>
    <li>red</li>
    <li>blue</li>
    <li>blue</li>
     <li>old</li>
    <li>new</li>
    <li>red</li>
    <li>blue</li>
    <li>blue</li>
     <li>old</li>
    <li>new</li>
    <li>red</li>
    <li>blue</li>
    <li>blue</li>
     <li>old</li>
    <li>new</li>
    <li>red</li>
    <li>blue</li>
    <li>blue</li>
     <li>old</li>
    <li>new</li>
    <li>red</li>
    <li>blue</li>
    <li>blue</li>
</ul>
<form>
    <input type="button" id="approve" value="Approve" />
    <input type="button" id="reject" value="Reject" />
    <input type="button" id="clear" value="Clear" />
</form>

CSS

li {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    margin: 5px;
    text-align: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
}
#tags .ui-selecting {
    background: #FEFF9F;
}
#tags .ui-selected {
    background-color: #eFeF8F;
}

JavaScript

$("#tags").selectable({
    stop: function() {
        var names = $.map($('.ui-selected'), function(element, i) {
            return $(element).text();
        });

        $('li').filter(function() {
            if ($.inArray($(this).text(), names) != -1) {
                return true;
            } else {
                return false;
            };
        }).addClass('ui-selected');
    }
});

$("#approve").click(function() {
    $("#tags")
        .find('.ui-selected')
        .addClass('approve')
        .removeClass('.ui-selected reject');
});
$("#reject").click(function() {
    $("#tags")
        .find('.ui-selected')
        .addClass('reject')
        .removeClass('.ui-selected approve');
});
$("#clear").click(function() {
    $("#tags")
        .find("li")
        .removeClass("ui-selected approve reject");
    $("#approved").val('');
});