Introduction

I am sure you have seen many websites like Google search that displays data from Wikipedia in their search results. The Wikipedia API allows developers to access its content via an API. For this article, you should have a good knowledge of jQuery and JavaScript.

In this article, I would like to share how to search and get data using the Wikipedia API and jQuery.

Procedure to search data through API from Wikipedia

Using this API provided by Wikipedia, we can search for data from Wikipedia from the titles in the Wikipedia data store.

http://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchstring + callback=?

Through this code we can search data from the Wikipedia site.

  1. <script type="text/javascript">
  2. function WikiSearchdata(search) {
  3. $j.ajax({
  4. type: "GET",
  5. url: "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + search + "&callback=?",
  6. contentType: "application/json; charset=utf-8",
  7. async: false,
  8. dataType: "json",
  9. success: function(data, textStatus, jqXHR) {
  10. $j.each(data, function(i, item) {
  11. if (i == 1) {
  12. var searchdata = item[0];
  13. searchwiki(searchdata);
  14. }
  15. });
  16. },
  17. error: function(errorMessage) {
  18. }
  19. });
  20. }
  22. function searchwiki(search) {
  23. $j.ajax({
  24. type: "GET",
  25. url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text§ion=0&page=" + search + "&callback=?",
  26. contentType: "application/json; charset=utf-8",
  27. async: false,
  28. dataType: "json",
  29. success: function(data, textStatus, jqXHR) {
  30. var markup = data.parse.text["*"];
  31. var blurb = $j('<div></div>').html(markup);
  32. blurb.find('a').each(function() { $j(this).replaceWith($j(this).html()); });
  33. blurb.find('sup').remove();
  34. blurb.find('.mw-ext-cite-error').remove();
  35. $j('#results').html(blurb);
  36. },
  37. error: function(errorMessage) {
  38. }
  39. });
  40. }
  41. </script>

The Search results will be such as:


Search result Will Be like As
This search API will provide links to results and related references link of the search keyword. Using these links the user will navigate to the Wikipedia site .
  1. $.getJSON("http://en.wikipedia.org/w/api.php?callback=?", {
  2. srsearch: q,
  3. action: "query",
  4. list: "search",
  5. format: "json"
  6. },
This code will provide links of results and a related references link of the search keyword.
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WikirRference.aspx.vb" Inherits="Default2" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <script src="Scripts/jquery-1.10.2.intellisense.js" type="text/javascript"></script>
  6. <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
  7. <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
  8. <title></title>
  9. <script type="text/javascript">
  10. function searchdata() {
  11. var q = $("#searchterm").val();
  12. $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
  13. {
  14. srsearch: q,
  15. action: "query",
  16. list: "search",
  17. format: "json"
  18. },
  19. function(data) {
  20. $("#results").empty();
  21. $("#results").append("Results for <b>" + q + "</b> </br>");
  22. $("#results").append("<div> </div>");
  23. $.each(data.query.search, function(i, item) {
  24. $("#results").append("<div><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a> : " + item.snippet + "</div>");
  25. });
  26. });
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <form id="form1" runat="server">
  32. <div style="border: 2px solid #a1a1a1;padding: 10px 40px; background: #dddddd; width: 300px; border- radius: 25px; height:60px; te xt-align:left;"><b>Wikipedia API Search Using jQuery</b>
    <br /> (This Wikipedia API will give the search results and references more than one.)</div>
  33. <div style="padding-left:75px; padding-top:15px;">
    <input id=    "searchterm" type="text" /> <input id="search" type="button" value="Search" onclick="searchdata();"/></div>
  34. <div> </div>
  35. <div id="results" style="width:300px; box-shadow: 10px 10px 5px #888888;">
  36. </div>
  37. </form>
  38. </body>
  39. </html>
In these search result s, a small description and Links will be present from the search keyword. Through this API the search result will be.

API search result will be.