"walkepidia search"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ryanbaldoza/pen/oWobar?limit=all&page=39&q=service" /> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet"> <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">body { font-family: 'Raleway', sans-serif; } #search-input { margin:20px 10px 30px 10px; } .random-link { margin-top:5px; } .btn-search:disabled { opacity: 1; cursor: default; } .btn-search { background-color: #212121; } /* .btn-search:hover { background-color: #101010; } */ .fa-search{ color: #fff; } h1 { margin: 30px 0; } h3{ margin:5px 0; } .search-output { border: 2px solid #212121; margin-bottom:20px; padding: 10px; border-radius: 5px; } .search-query { border: 2px solid #212121; } .home { position:relative; width: 100%; height: 100%; } .home img { width:100%; height:100vh; object-fit:cover; } .home h4 { text-align:center; overflow: auto; margin: auto; position: absolute; top: 15%; left: 0; bottom: 0; right: 0; } .nothing { position:relative; width: 100%; height: 100%; } .nothing img { width:100%; height:100vh; object-fit:cover; } .nothing h4 { text-align:center; overflow: auto; margin: auto; position: absolute; top: 25%; left: 0; bottom: 0; right: 0; } .delay-1 { animation-delay: .25s; } .delay-2 { animation-delay: .5s; } .delay-3 { animation-delay: .75s; } .delay-4 { animation-delay: 1s; } .wiki-link { overflow-wrap: break-word; word-wrap: break-word; }</style></head><body> <div class="container"> <div class="row"> <div class="title text-center"> <h1><i class="fa fa-free-code-camp"></i> Wikipedia Search</h1> </div> <div id="search-input"> <div class="input-group col-md-6 col-md-offset-3"> <input type="text" class="search-query form-control" placeholder="Search" /> <span class="input-group-btn"> <button class="btn btn-search" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> <div class="random-link text-center"> <p><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Want a random Wikipedia article?</a></p> </div> </div> <div class="container"> <p style="display:none" class="results-for">Search results for <strong></strong></p> <div class="search-output" style="display:none"> <!-- <h3><a href="#" class="wiki-title" target="_blank">Header</a></h3> <a href="#" target="_blank" class="wiki-link">link to wikipedia</a> <p class="wiki-desc">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> --> </div> <div class="home"> <h4>Explore. Search for any topic in Wikipedia.</h4> <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-504832.jpg" alt="home" /> </div> <div class="nothing" style="display:none"> <h4>Sorry, no topics matched your criteria, please try and search again.</h4> <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-180429.jpg" alt="home" /> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } }); $('.search-query').each(function() { var elem = $(this); var searchQuery = elem.val(); var wikiUrl = ""; var flag = true; var out = true; var nothing = true; elem.bind("propertychange change keyup keypress input paste blur", function(event){ if(searchQuery != elem.val()) { searchQuery = elem.val(); wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchQuery + '&format=json&callback=?'; // START of JSON $.getJSON(wikiUrl, function(json) { $(".search-output").html(""); $(".search-output").hide(); var html = json[1].length; var arr1 = json[1].reverse(); var arr2 = json[2].reverse(); var arr3 = json[3].reverse(); if(html>=1){ for(i=0;i<html;i++){if (window.CP.shouldStopExecution(1)){break;} $(".search-output").show(); $(".results-for").show(); nothing = true; var wikiTitle = '<h3><a href="'+arr3[i]+'" class="wiki-title" target="_blank">'+arr1[i]+'</a></h3>'; var wikiLink = '<a href="'+arr3[i]+'" target="_blank" class="wiki-link">'+arr3[i]+'</a>'; var wikiDesc = '<p class="wiki-desc">' +arr2[i]+ '</p>'; var searchResults = wikiTitle + wikiLink + wikiDesc; $(".search-output").prepend( searchResults + '<hr>'); $(".nothing").hide(); } window.CP.exitedLoop(1); $(".results-for").html("Search results for "+"<strong>"+searchQuery+"</strong> - Showing <strong>"+html+" </strong>results"); } else if (html<1){ $(".results-for").hide(); if(nothing==true){ nothing = false; $(".nothing").show().animateCss("fadeInRight").addClass(".delay-1"); flag = true; out = false; $(".search-output").hide(); } } }); // END OF JSON if(flag == true) { flag = false; out = true; $(".home").hide(); $(".nothing").hide() $(".results-for").show(); $(".search-output").show().animateCss("fadeInRight").addClass(".delay-1"); } } else if (!searchQuery) { $(".results-for").hide(); if (out==true){ searchQuery = elem.val(); flag = true; out = false; $(".search-output").hide(); $(".nothing").hide(); $(".home").show().animateCss("fadeInRight").addClass(".delay-1"); } } }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rubik Presentation Page
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: