Autocomplete Search using jQuery and Wikipedia OpenSearch API - GeeksforGeeks

21 Aug, 2020
In web design, the autocomplete feature is a common one. When the user types some value in the search text box, it automatically shows a relevant list of suggestions in the form of dropdown that can be chosen by the user easily. For jQuery Autocomplete feature, refer this article.
Approach: In this article, we use the Wikipedia Opensearch API and the jQuery Autocomplete UI. Basic HTML code is used for the user interface for keyword search in an input text box. While using the jQuery code, the search request is sent to Wikipedia which in turn returns a list of suggestions based on user entry. The data response is in JSON format.
Syntax: Wikipedia URL for API
"http://en.wikipedia.org/w/api.php"
Setting up environment: For more option settings
https://en.wikipedia.org/w/api.php?action=help&modules=opensearch
The developer can refer the above URL link and make use of many option settings depending on the application’s need.
jQuery and jQuery UI libraries: The following files are used in the code.
<link href=” https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css” rel=”stylesheet” type=”text/css”/><script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js”></script><script src=””https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
Example: The following example demonstrates the autocomplete search feature by using Wikipedia OpenSearch API and jQuery. The HTML code provides a normal search input box which gives suggestions when the user types some search texts.
<!DOCTYPE html><html>  <head>    <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>      <style>        body {            width: 100%;            background: #e9e9e9;            margin: 0 auto;            padding: 0;            color: #7faf7f;            font-family: Arial, sans-serif;            font-size: 12px;        }          #searchID input {            width: 350px;            height: 20px;            margin: 0;            padding: 15px;            background: #fff;            border: 1px solid black;            color: #727272;            float: left;            font: 12px "Lucida Sans Unicode", sans-serif;            transition: background 0.4s ease-in-out 0s;        }          #searchID button {            width: 45px;            height: 45px;            text-indent: -9999em;            background: url("searchIcon.jpg") #4eac10;            transition: background 0.3s ease-in-out 0s;            border: 1px solid #fff;        }          #containerID {            width: 50%;            margin: 0 auto;        }          h2 {            color: green;            text-align: left;        }    </style></head>  <body>    <div id="containerID">        <div>            <h2>GeeksforGeeks</h2>            <b>                Autocomplete Search using jQuery                and Wikipedia Opensearch API            </b>              <p></p>              <form method="get" id="searchID">                <input type="text" class="searchClass"                     id="searchInputID" value="" />                <button type="submit">Search</button>            </form>        </div>    </div>      <script type="text/javascript">        $(".searchClass").autocomplete({            source: function (request, response) {                console.log(request.term);                $.ajax({                      // Wikipedia API url link                    url:                    "http://en.wikipedia.org/w/api.php",                    dataType: "jsonp",                    data: {                        action: "opensearch",                        // Output format                        format: "json",                        search: request.term,                        namespace: 0,                          // Maximum number of result                        // to be shown                        limit: 8,                    },                    success: function (data) {                        response(data[1]);                    },                });            },        });    </script></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)