filter test

Using underscore.js to filter from an array.

by Jeremy Bolanos

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<input type="text" class="search" />
<ul id="results" />

CSS

input[type="text"].search {
    font: 13px normal Arial, sans-serif;
    display: inline-block;
    margin: 5px;
    padding: 2px 5px;
    width: 160px;
    background-color: rgba(180, 180, 180, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

ul#results li {
    
}

JavaScript

var showValue = ["Apple Pie", "Box Troll", "Charlie Horse", "Dakota", "Echo Chamber", "Face Off", "Golf Score", "Horror Movie", "Indiana State", "Juke Box", "Kite Flying"];

$('input.search').keyup(function() {
    var s = $(this).val();
    if(s === '') {
        $('#results').empty();
    }else{
        var searchValue = _.filter(showValue, function(val) {
            var pattern = new RegExp(s, "i");
            return val.match(pattern);
        });
        $('#results').empty();
        $.each(searchValue, function(k, v) {
            $('#results').append('<li>' + v + '</li>');
        });
    }
});