Search in my fiddles

Change your username in the code !

by ian_smithz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="row">
    <div class="col-md-12">
        <div class="form-group col-xs-4">
            <input type="email" class="form-control" id="query" placeholder="Type a keyword here" />
        </div>
        <div class="form-group col-xs-4">
            <button class="btn" id="search">Search</button>
            <img id='loader' src='https://supportforums.cisco.com/sites/all/themes/ciscotheque_bootstrap/images/ajax-loader.gif' class="hidden" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div id="results"></div>
        <div id="errorMessage"></div>
    </div>
</div>

CSS

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');
 .container {
    margin-top: 10px;
}
body {
    margin: 10px;
    font-family: Georgia;
}
.hidden {
    display:none;
}

JavaScript

var searchFiddles = {
    dataReceived: function(data){
        var query = this.query;
        var filtered = _.filter(data.list, function(item){if(item.title.contains(query) || item.description.contains(query)){ return item}});
        
        if(filtered.length > 0){
            filtered.forEach(function(value){
                var newArticle = $("<article>");
                newArticle.append($("<a>",
                                    {
                						href: value.url,
                    					target: "_blank",
                    					text: value.title
                					}));
                newArticle.append($("<p>").text(value.description));
                newArticle.appendTo("#results");
            });
        }
        else{
            this.DOM.$errorMessage.html("<div class='alert alert-info'>No result for '"+query+"'</div>");
        }
    },
    errorHappened: function(){
        this.DOM.$errorMessage.html("<div class='alert alert-danger'>An error happened !</div>");
    },
    resetControls: function(){
        this.DOM.$loader.addClass("hidden");
        this.DOM.$searchButton.attr("disabled", false);
        this.DOM.$queryField.attr("disabled", false);
    },
    launchSearch: function(){
        this.DOM.$loader.removeClass("hidden");
        this.DOM.$results.empty();
        this.DOM.$errorMessage.empty();
        this.DOM.$searchButton.attr("disabled", true);
        this.DOM.$queryField.attr("disabled", true);
        

        $.ajax(
            {
                url: "https://jsfiddle.net/api/user/"+this.username+"/demo/list.json",
                data: {
                    limit:this.limit
                },
                dataType: "JSONP",
                jsonp: "jsoncallback",
                type: "GET"
            }
        )
        .done(this.dataReceived.bind(this))
        .fail(this.errorHappened.bind(this))
        .always(this.resetControls.bind(this));   
    },
    initialize: function(options){
       ...