The following Wikipedia api tutorial will demonstrate to you how to use the Wikipedia search api example using JavaScript. API stands for Application Programming Interface, it allows your application to work with other applications, usually in the form of JSON data.
Wikipedia Search API Example
Wikipedia is a free, open content online encyclopedia. Anyone registered on the site can create an article for publication. A server program that enables anyone to edit Web site content through their Web browser. They provide an API to get page content search results.
The following example will show you how to use the Wikipedia API. Find the below source code:-
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wikipedia Search API JavaScript Example</title>
<script src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready(function () {
$('#txtSearchText').keypress(function (e) {
if (e.keyCode == 13)
$('#btnSearch').click();
});
});
function WikipediaAPISearch() {
var txt = $("#txtSearchText").val();
$.ajax({
type: "GET",
url: "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + txt + "&callback=?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data, textStatus, jqXHR) {
$.each(data, function (i, item) {
if (i == 1) {
var searchData = item[0];
WikipediaAPIGetContent(searchData);
}
});
},
error: function (errorMessage) {
alert(errorMessage);
}
});
}
function WikipediaAPIGetContent(search) {
$.ajax({
type: "GET",
url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text§ion=0&page=" + search + "&callback=?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data, textStatus, jqXHR) {
var markup = data.parse.text["*"];
var blurb = $('<div></div>').html(markup);
// remove links as they will not work
blurb.find('a').each(function () { $(this).replaceWith($(this).html()); });
// remove any references
blurb.find('sup').remove();
// remove cite error
blurb.find('.mw-ext-cite-error').remove();
$('#results').html($(blurb).find('p'));
$('#results').html(blurb);
},
error: function (errorMessage) {
alert(errorMessage);
}
});
}
</script>
</head>
<body>
<div class="container">
<h2>How to use Wikipedia Search API</h2>
<table class="table">
<tr>
<th>
<input id="txtSearchText" type="text" value="Sachin Tendulkar" />
<input id="btnSearch" type="button" value="Search" onclick="WikipediaAPISearch();" />
</th>
</tr>
<tr>
<th>
<div id="results" style="font-family:Verdana; font-size:10px; font-style:normal;">
</div>
</th>
</tr>
</table>
</div>
</body>
</html>
Conclusion
I hope you liked this article on how to use wikipedia search api with example. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply