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.

Implementing Autocomplete Search using Wikipedia OpenSearch API

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

View Live Demo  Download

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

If you enjoyed this article, Get email updates (It’s Free)
Autocomplete Search using Wikipedia API & jQueryhttp://w3lessons.info/wp-content/uploads/2015/03/Implementing-Autocomplete-Search-using-Wikipedia-OpenSearch-API.pnghttp://w3lessons.info/wp-content/uploads/2015/03/Implementing-Autocomplete-Search-using-Wikipedia-OpenSearch-API-150x150.pngKarthikeyan KjqueryAPI,Autocomplete Search,Jquery,search box,Wikipedia
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...