wikipedia api search

Tags | Wikipedia API example javascript, Wikipedia search API javascript, Wikipedia API search content, Wikipedia API ajax, Wikipedia API tutorial

Wikipedia API Example JavaScript

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. Wikipedia provides an API to get page content search results.

Wikipedia API Search Results

This Wikipedia API tutorial will demonstrate how to use Wikipedia search API using JavaScript Ajax Get method. Find the source code of Wikipedia API example below:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>wikipedia api example javascript</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&section=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>Wikipedia api get page content</h2>
        <table class="table">
            <tr>
                <th>
                    <input id="txtSearchText" type="text" value="Sachin Tendulkar" />
                    &nbsp; <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>

Download Source Code

Reference | Wiki API Tutorial

Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

LEAVE A REPLY

Please enter your comment!
Please enter your name here