Make an “instant search” application using JSON, Ajax and JQuery
Update 20th Feb 2013: Instant search is now implemented on Solrstrap, the lightweight Solr interface written in JavaScript, HTML and CSS. Check it out here.
Here is a quick demo that demonstrates how to create an “instant search” service using JSON, ajax and JQuery. This instant search application uses the excellent OpenSearch interface provided by Wikipedia. Use this code as a starting point for developing prettier result pages.
The Wikipedia query API is described in some detail here.
Click here to see the demo, or copy and paste the code below into a blank HTML document.
|
1 |
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> |
Search Wikipedia!
|
1 |
<input id="searchterm" type="text" /> <button id="search">search</button> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript">// <![CDATA[ $("#searchterm").keyup(function(e){ var q = $("#searchterm").val(); $.getJSON("http://en.wikipedia.org/w/api.php?callback=?", { srsearch: q, action: "query", list: "search", format: "json" }, function(data) { $("#results").empty(); $("#results").append(" Results for <b>" + q + "</b> "); $.each(data.query.search, function(i,item){ $("#results").append(" <div><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a>" + item.snippet + "</div> "); }); }); }); // ]]></script> |
Fergus McDowall 2012
Related Posts
- Asynchronous search results with JQuery, Solr, Json and Ajax
Super Fast Image Search with JSON, JQuery and Flickr
Introducing Solrstrap: A blazing fast tool for querying Solr in a Googleish fashion
Using Handlebars.js To Display Results From Solr- A Primer
Crafting elasticsearch queries in Python.
Solr and Javascript Templating (Solr meetup presentation, September 2012)
hello , thanks for your code !!
This is what i was searching for!!!!!!!!!!! And your blog seems amazing!
thanks for his tutorial really helpful i also viewed another live search with ajax on TalkersCode.com which i found very useful to create a good search system http://talkerscode.com/webtricks/basic-instant-fulltext-search-system-using-ajax-and-php.php