Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
247 views

Autocomplete Search Using Wikipedia API & JQuery - W3lessons - Info

Uploaded by

Priyanshu Kumâr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
247 views

Autocomplete Search Using Wikipedia API & JQuery - W3lessons - Info

Uploaded by

Priyanshu Kumâr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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

You might also like