wikisearchious

In this example below you will see how to do a wikisearchious with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tropicalchancer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tropicalchancer ©
  • HTML
  • CSS
  • JavaScript
    <div class='container'>
     <br><br><br>
  <div class="input-group">
    
            <input type="text" class="form-control" placeholder="WikiWhat?" name="search-term" id="search-term">
    
    
            <div class="input-group-btn">
              
                <button class="btn btn-default" id="search-button"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
   <ul id="results"></ul>
</div>

/*Downloaded from https://www.codeseek.co/tropicalchancer/wikisearchious-rLgWkY */
    


/*Downloaded from https://www.codeseek.co/tropicalchancer/wikisearchious-rLgWkY */
    $(document).ready(function() {
  //COLLECTS INPUT
  $("#search-term").val('');
  $("#search-term").keyup(function () {
    var q = $("#search-term").val();
    //REQUESTS API
    $.getJSON("http://en.wikipedia.org/w/api.php?callback=?", {
        srsearch: q,
        action: "query",
        list: "search",
        format: "json"
    },
              //SEARCH RESULTS aka DO STUFF
  function (data) {
          //CLEAR HTML
        $("#results").empty();
          //ADD TO HTML "WIKI FOR SEARCHINPUT"
        $("#results").append("Wiki for: " + q + "");
          //GO THRU JSON DATA AND APPEND WHAT WE WANT TO HTML
        $.each(data.query.search, function (i, item) {
            $("#results").append("<h1><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "' target='_blank'>" + item.title + "</a><br>" + item.snippet + "</h1>");
        });
    });
});
    //DON'T KNOW WHAT EXACTLY THIS DOES
$('#search-button').on("click", function() {
	$("#search-term").val('');
});
});

Comments