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.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

1	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Search Wikipedia!

<input id="searchterm" type="text" /> <button id="search">search</button>

1	<input id="searchterm" type="text" /> <button id="search">search</button>

<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>

$("#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

Article written by Fergus McDowall

Senior Consultant at Comperio. Dedicated emacs user.

Norsk - Svenska - English

jbkod

July 29, 2013 at 18:27 | Permalink

hello , thanks for your code !!

cecilia

November 24, 2014 at 00:35 | Permalink

This is what i was searching for!!!!!!!!!!! And your blog seems amazing!

parker

August 9, 2015 at 08:56 | Permalink

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

Search Nuggets by

Blogging about search as the solution

Make an “instant search” application using JSON, Ajax and JQuery

Search Wikipedia!

Related Posts

Article written by Fergus McDowall

3 response to: «Make an “instant search” application using JSON, Ajax and JQuery»

Leave a response

Moved Permanently

Subscribe

Recent Posts

Recent Comments

Tags

OSLO

STOCKHOLM