Autocomplete Search using Wikipedia API and jQuery UI

After a long time I’m writing this tutorial for my readers. People have asked me How to implement autocomplete search using Wikipedia Opensearch API.

What is Autocomplete Search?

It is nothing but normal search box where it provides suggestions in a dropdown while typing the keyword in the text box.

By using Wikipedia Opensearch API and jQuery Autocomplete UI, we can easily implement this feature without writing large lines of code.

You need to include both jquery & jQuery UI script in the bottom of your page. I have used google’s jQuery CDN

jQuery & jQuery UI Plugin Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

Code for Autocomplete Search From Wikipedia

Please replace the ID or Classname of the search box in the below code

$(".searchbox").autocomplete({

    source: function(request, response) {

        $.ajax({

            url: "http://en.wikipedia.org/w/api.php",

            dataType: "jsonp",

            data: {

                'action': "opensearch",

                'format': "json",

                'search': request.term

            },

            success: function(data) {

                response(data[1]);

            }

        });

    }

});

The above code will send request to Wikipedia & it returns the suggestions based on the keyword via response in JSON format.

For more parameters please visit this url – http://www.mediawiki.org/wiki/API:Opensearch

It is very simple to implement in your existing project. I hope you like this tutorial very much.

Please share your feedback via comments & subscribe to my blog to get the latest update on Web technologies.

Thanks