freeCodeCamp/views/stories/search-stories.jade

.col-xs-12
    .spacer
    h1.text-center Search is coming soon
    .input-group
        input#searchArea.big-text-field.field-responsive.form-control(type='text', placeholder='Search our stories', autofocus)
        span.input-group-btn
            button.disabled#searchbutton.btn.btn-big.btn-primary.btn-responsive(type='button') Search
    .spacer

#story-list
    ul#stories
script.
    $('#searchArea').keypress(function(event) {
        if (event.keyCode === 13 || event.which === 13) {
            executeSearch();
            $('#searchArea').focus();
            event.preventDefault();
        }
    });
    $('#searchbutton').on('click', function() {
        executeSearch();
    });
    function executeSearch() {
        $('#stories').empty();
        var searchTerm = $('#searchArea').val();
        var getLinkedName = function getLinkedName(name) {
            return name.toLowerCase().replace(/\s/g, '-');
        }
        $.post('/stories/search',
                {
                    data: {
                        searchValue: searchTerm
                        }
                })
                .fail(function (xhr, textStatus, errorThrown) {
                })
                .done(function (data, textStatus, xhr) {
                    for (var i = 0; i < data.length; i++) {
                        var li = document.createElement('li');
                        var linkedName = getLinkedName(data[i].storyLink);
                        var rank = data[i].rank;

                        $(li).html(
                                "<div class='row text-left'>" +
                                    "<div class='col-xs-3 col-sm-1'>" +
                                        "<div class='story-up-votes'>" +
                                            "<span>" + rank + "</span>" +
                                        "</div>" +
                                    "</div>" +
                                    "<div class='col-xs-2 col-sm-1'>" +
                                        "<img src='" + data[i].author.picture + "' class='img-responsive'/>" +
                                    "</div>" +
                                    "<div class='col-xs-7 col-sm-10'>" +
                                        "<div class='row'>" +
                                            "<div class='col-xs-12'>" +
                                                "<a href='/stories/" + linkedName + "'>"
                                                    + data[i].storyLink +
                                                "</a>" +
                                            "</div>" +
                                            "<div class='col-xs-12'>" +
                                                "<span>Posted " +
                                                    moment(data[i].timePosted).fromNow() +
                                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
                                            "</div>" +
                                        "</div>" +
                                    "</div>" +
                                "</div>" +
                            "</li>");
                        $(li).appendTo($('#stories'));
                    }
                });

    }