"NPM Search Engine"
Bootstrap 3.0.0 Snippet by kdridi

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form role="form" id="NPMSearchForm" action="#"> <h1 class="form-signin-heading">NPM Search Engine</h1> <div class="input-group input-group-lg"> <span class="input-group-addon">Keywords</span> <input type="text" class="form-control" placeholder="Ex: arykow npm" name="keywords"> </div> <br> <button class="btn btn-lg btn-primary btn-block" type="submit">Search</button> <br> </form> <section class="packages"> <div class="row packages-group"> <div class="col-md-6 package"> <div class="well well-sm"> <div class="row"> <div class="col-xs-3 col-md-3 text-center"> <img src="http://placehold.it/110x110" alt="bootsnipp" class="img-rounded img-responsive package-image" /> </div> <div class="col-xs-9 col-md-9 section-box"> <h2 class="name"> Bootsnipp <a href="http://bootsnipp.com/" target="_blank"><span class="glyphicon glyphicon-new-window"> </span></a> </h2> <p class="description"> Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework</p> <hr /> <div class="row rating-desc"> <div class="col-md-12"> <span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart"> </span><span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart"> </span><span class="glyphicon glyphicon-heart"></span>(36)<span class="separator">|</span> <span class="glyphicon glyphicon-comment"></span>(100 Comments) </div> </div> </div> </div> </div> </div> <div class="col-md-6 package"> <div class="well well-sm"> <div class="row"> <div class="col-xs-3 col-md-3 text-center"> <img src="http://placehold.it/110x110" alt="jQuery2DotNet" class="img-rounded img-responsive package-image" /> </div> <div class="col-xs-9 col-md-9 section-box"> <h2 class="name"> jQuery2DotNet <a href="http://www.jquery2dotnet.com/" target="_blank"><span class="glyphicon glyphicon-new-window"> </span></a> </h2> <p class="description"> Cool jQuery, CSS3,HTML5, MVC and C# tutorials with examples</p> <hr /> <div class="row rating-desc"> <div class="col-md-12"> <span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart"> </span><span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart"> </span><span class="glyphicon glyphicon-heart"></span>(36)<span class="separator">|</span> <span class="glyphicon glyphicon-comment"></span>(100 Comments) </div> </div> </div> </div> </div> </div> </section> </div> </div>
body{ margin-top:0px; } .glyphicon { margin-right:5px;} .section-box h2 { margin-top:0px;} .section-box h2 a { font-size:15px; } .glyphicon-heart { color:#e74c3c;} .glyphicon-comment { color:#27ae60;} .separator { padding-right:5px;padding-left:5px; } .section-box hr {margin-top: 0;margin-bottom: 5px;border: 0;border-top: 1px solid rgb(199, 199, 199);} .packages { display: none; }
try { var MockBuilder = function() { this.data = { }; }; MockBuilder.prototype.add = function(id, name, description, url) { this.data[id] = { name: name, description: description, url: url, image: "http://lorempixel.com/200/200/abstract/" + name }; return this; }; MockBuilder.prototype.build = function() { return this.data; }; var NPMSearchForm = function() { this.data = { keywords: null }; }; NPMSearchForm.prototype.keywords = function(keywords) { this.data.keywords = keywords; return this; }; NPMSearchForm.prototype.submit = function(callback) { var data = this.data; var mock = new MockBuilder(); for(var index = 1; index < (1 + Math.random() * 10); index++) { mock.add("package" + index, "name" + index, "description" + index, "http://placehold.it/100x" + (10 * index)); } setTimeout(function() { callback(null, mock.build()); }, 1); }; $(document).ready(function () { var packagesTemplate = $('.packages'); var packagesElement = null; $("#NPMSearchForm").submit(function (event) { try { var keywords = $(this).find('input:text[name=keywords]').val(); console.log("keywords: %s", keywords); var action = function() { var callback = function(err, results) { if(err) { alert(err); } else { packagesElement = packagesTemplate.clone(); packagesElement.insertBefore(packagesTemplate); var group = packagesElement.find('.packages-group'); var keys = Object.keys(results); while(packagesElement.find('.package').size() < keys.length) { group.clone().insertBefore(group); } var index = 0; packagesElement.find('.package').each(function(i, e) { if (index < keys.length) { var result = results[keys[index++]]; $(e).find('p.description').text(result.description); $(e).find('img.package-image').attr('src', result.image); $(e).find('h2.name').each(function(i, e) { e.firstChild.data = " " + result.name + " "; $(e).find('a').attr('href', result.url); }); //$(e).find('.rating-desc').hide(); } else { $(e).hide(); } }); packagesElement.fadeIn(); } }; new NPMSearchForm().keywords(keywords).submit(callback); }; if(packagesElement) { packagesElement.fadeOut(function() { packagesElement.remove(); packagesElement = null; action(); }); } else { action(); } } catch(err) { console.log("throws err: %s", err); } event.preventDefault(); }); }); } catch(err) { alert("err: " + err); }

Related: See More


Questions / Comments: