Autocomplete Search using Wikipedia API & jQuery | W3lessons.

info

Home

About Me

Contact

Request a Tutorial

Advertise with Us

Sitemap

50
Shares

39

PHP

jQuery

2
Contact

Facebook

Codeigniter

Freebies

Twitter

Html5

CSS3

WallScript Demo

Home jquery Autocomplete Search using Wikipedia API and jQuery UI

Autocomplete Search using

Wikipedia API and jQuery UI
Karthikeyan K

Like

March 1, 2015

jquery
0

GeoDig Local Talent In

Chennai

0 Comments

39

After
a long time Im
writing this tutorial for my
readers. People have
asked me How to
implement autocomplete
search using Wikipedia

Opensearch API.
What is Autocomplete

24,000+
SUBSCRIBERS
CAN'T GO
WRONG !!!

Search?

Subscribe and get access to

http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

Autocomplete Search using Wikipedia API & jQuery | W3lessons.info

200+ Demo scripts for FREE!

Enter
your email
Enter
your
emailhere
here

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

Send Me Email Updates

We won't Spam You

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 googles jQuery CDN

jQuery & jQuery UI Plugin Code

1 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
></script>
2 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery
-ui.css" />
3 <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
http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

Autocomplete Search using Wikipedia API & jQuery | W3lessons.info

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(".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]);
}
});
}
});

Follow W3lessons

Complete Web 2.0

3,851 likes

Like Page

Be the first of your friends to like this

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

Follow Me

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

Karthikeyan K

latest update on Web technologies.

google.com/+KarthikeyanK
Imagineer, Blogger, Web Deve

Thanks

If you enjoyed this article, Get email updates (Its Free)

Your Name

Your Email

1,454 followers

Sign Up

Popular Posts
API, Autocomplete Search, Jquery, search box, Wikipedia

Related Posts

Top 10 Free Responsive

HTML5 Bootstrap
Website Templates of
2015

Facebook Url Expander

with jQuery Ajax and PHP

http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

Autocomplete Search using Wikipedia API & jQuery | W3lessons.info

jQuery or AngularJS
Which one is better?

Facebook oAuth 2.0 Login

without Page Refresh
using jQuery, PHP &
MYSQL

Export HTML Table to

Excel, CSV, JSON, PDF,
PNG using jQuery

Facebook Style Image

Upload in Comment Box
using PHP, jQuery &
MYSQL

Facebook Share to Unlock

Content using jQuery &
Facebook API

Facebook Url Expander

with jQuery Ajax and
PHP

Facebook Style Cover

Image Reposition using
jQuery & PHP

Facebook Wall Script 5.0

Sharing Posts,
Message Filtering, Instant
Notifications & many

About Karthikeyan K
I have more than 5 years of experience in web development arena. I have designed

more

complex back-end management systems including content management, social

networking sites and communication interfaces. The projects in my workplace are
based on PHP in conjunction with various other web development technologies. My
strength lies in various domains like PHP, Mysql, JavaScript, AJAX, DHTML,
XHTML and CSS.

Facebook Style Press

Enter to Send Option in
Message / Comment Box
using jQuery

View all posts by Karthikeyan K

How to Use Custom Data
Attributes using HTML5

HTML5 Inline Edit with

PHP, MYSQL & jQuery
Ajax

Categories
AngularJs (1)

http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

Autocomplete Search using Wikipedia API & jQuery | W3lessons.info

Codeigniter (7)
CSS3 (69)
facebook (35)
Freebies (113)
htaccess (4)
html5 (21)
jquery (120)
Mysql (7)
PHP (55)
SEO (2)
Testing (1)
twitter (5)
Uncategorized (5)
Web Design (75)
Introduction to HTML6

How to Share Content on Whatsapp using

wordpress (11)

jQuery

Recent Comments
vexed user again on Facebook
Timeline Wall Script 2.0 with PHP,
Mysql, jQuery
vexed user on Facebook Timeline
Wall Script 2.0 with PHP, Mysql,
jQuery
newMember on Export HTML
Table to Excel, CSV, JSON, PDF,
PNG using jQuery
AMIT SAMOTA on Facebook
oAuth 2.0 Login without Page
Refresh using jQuery, PHP &
MYSQL
artie mututsa on Facebook Style
Image Upload in Comment Box
using PHP, jQuery & MYSQL
Karthikeyan K on Facebook Style
Image Upload in Comment Box
using PHP, jQuery & MYSQL
BinNurIch on Instant Soundcloud
Search using PHP & jQuery Ajax
artie mututsa on Facebook Style
Image Upload in Comment Box

http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

Autocomplete Search using Wikipedia API & jQuery | W3lessons.info

using PHP, jQuery & MYSQL

Dhruvit Patel on Export HTML
Table to Excel, CSV, JSON, PDF,
PNG using jQuery
Devang on Facebook Style Image
Upload in Comment Box using
PHP, jQuery & MYSQL

Subscribe My Updates Via

Email

Enter email

Go

Recent Posts

About

Pages

Tags

jQuery or AngularJS
Which one is better?

Karthikeyan K

About Me
Advertise with Us
Contact
Newsletter The Voice of
Web Design & Web
Development
Privacy Policy
Request a Tutorial
Search
Sitemap

API Bootstrap Button call to

Login & SignUp form using

Material Design and
jQuery
Top 10 WordPress
Ecommerce Plugins

Entrepreneur, Imagineer,
Web Developer, Blogger
Chennai - India
itzurkarthi [at] gmail.com

Subscribe my updates
via Email

Export HTML Table to

Excel, CSV, JSON, PDF,
PNG using jQuery
Top 10 Free Responsive
HTML5 Bootstrap Website
Templates of 2015

Cascading
Style Sheets

action

codeigniter

CSS3

Design
facebook facebook
application facebook

wall

script favicon

freebies google+

htaccess HTML5 icons

image gallery javascript
Ok

Top 10 Responsive HTML5

Frameworks in 2015
Top 10 WordPress Plugins

http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

Jquery jquery

plugin Login form

message box mysql

new
techniques
php Plug-ins plugins
pricing table

Autocomplete Search using Wikipedia API & jQuery | W3lessons.info

for Mobile Users

How to use Meta Tags in
SEO? Tutorial and Tips
Facebook Url Expander
with jQuery Ajax and PHP
Top 10 Image Optimization
Plugins to Boost Your
WordPress Site

Copyright 2016. W3lessons.info

http://w3lessons.info/2015/03/01/autocomplete-search-using-wikipedia-api-and-jquery-ui/[29-02-2016 10:29:22]

responsive rss feed

scroll div search box share
to unlock Signup form slider
table design take a tour timeline

tips & tricks top

bar twitter Website

website speed wordpress