<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Search Nuggets &#187; Json</title>
	<atom:link href="http://blog.comperiosearch.com/blog/tag/json/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.comperiosearch.com</link>
	<description>A blog about Search as THE solution</description>
	<lastBuildDate>Mon, 13 Jun 2016 08:59:45 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=3.9.40</generator>
	<item>
		<title>Crafting elasticsearch queries in Python.</title>
		<link>http://blog.comperiosearch.com/blog/2014/12/17/crafting-elasticsearch-queries-python-hassle-free-way/</link>
		<comments>http://blog.comperiosearch.com/blog/2014/12/17/crafting-elasticsearch-queries-python-hassle-free-way/#comments</comments>
		<pubDate>Wed, 17 Dec 2014 12:36:39 +0000</pubDate>
		<dc:creator><![CDATA[Mats Julian Olsen]]></dc:creator>
				<category><![CDATA[Elasticsearch]]></category>
		<category><![CDATA[English]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Json]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://blog.comperiosearch.com/?p=3120</guid>
		<description><![CDATA[Creating JSON-like structures in Python (or any other programming language), can be a cumbersome experience. Consider this snippet from the elasticsearch-py library, taken from the example/query.py file: I would argue that 33 lines for creating the facets above is too much. To save you from the dreaded hassle of writing JSON in your programs, I [...]]]></description>
				<content:encoded><![CDATA[<p>Creating JSON-like structures in Python (or any other programming language), can be a cumbersome experience. Consider this snippet from the <a title="elasticsearch-py" href="https://github.com/elasticsearch/elasticsearch-py">elasticsearch-py</a> library, taken from the <a href="https://github.com/elasticsearch/elasticsearch-py/blob/master/example/queries.py">example/query.py </a>file:</p>
<script src="https://gist.github.com/6a30b86a010f361b9256.js"></script>
<p>I would argue that 33 lines for creating the facets above is too much.</p>
<p>To save you from the dreaded hassle of writing JSON in your programs, I created <a href="https://github.com/mewwts/addict"><em>addict,</em></a> a Python dictionary that let&#8217;s you create nested dictionaries using get- and set attribute syntax.</p>
<p>Here&#8217;s how the same code looks with addict<em>:</em></p>
<script src="https://gist.github.com/49e0fdf5bff3aeda521a.js"></script>
<p><a href="https://github.com/mewwts/addict"><em>addict</em></a> is open-source and MIT-licensed. It is actively developed and anyone interested is encouraged to submit issues and pull requests, as both are more than welcome.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.comperiosearch.com/blog/2014/12/17/crafting-elasticsearch-queries-python-hassle-free-way/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Idea: Your life searchable through Norch &#8211; NOde seaRCH, IFTTT and Google Drive</title>
		<link>http://blog.comperiosearch.com/blog/2014/11/26/idea-your-life-searchable-norch-node-search-ifttt-google-drive/</link>
		<comments>http://blog.comperiosearch.com/blog/2014/11/26/idea-your-life-searchable-norch-node-search-ifttt-google-drive/#comments</comments>
		<pubDate>Wed, 26 Nov 2014 14:33:08 +0000</pubDate>
		<dc:creator><![CDATA[Espen Klem]]></dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[crawl]]></category>
		<category><![CDATA[Document Processing]]></category>
		<category><![CDATA[Elasticsearch]]></category>
		<category><![CDATA[Google Drive]]></category>
		<category><![CDATA[IFTTT]]></category>
		<category><![CDATA[Index]]></category>
		<category><![CDATA[Json]]></category>
		<category><![CDATA[Life Index]]></category>
		<category><![CDATA[Lifeindex]]></category>
		<category><![CDATA[node]]></category>
		<category><![CDATA[Node Search]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[nodejs]]></category>
		<category><![CDATA[norch]]></category>
		<category><![CDATA[Personal Search Engine]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[search engine]]></category>
		<category><![CDATA[search-index]]></category>
		<category><![CDATA[sharepoint]]></category>
		<category><![CDATA[Small Data]]></category>
		<category><![CDATA[Solr]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://blog.comperiosearch.com/?p=3069</guid>
		<description><![CDATA[First some disclaimers: This has been posted earlier on lab.klemespen.com. Even though some of these ideas are not what you&#8217;d normally implement in a business environment, some of the concepts can obviously be transferred over to businesses trying to provide an efficient workplace for its employees. Norch is developed by Fergus McDowall, an employee of [...]]]></description>
				<content:encoded><![CDATA[<p><strong>First some disclaimers</strong>:</p>
<ul>
<li>This has been posted earlier on <a href="http://lab.klemespen.com/2014/11/25/idea-your-life-searchable-with-norch-node-search-ifttt-and-google-drive-spreadsheets/">lab.klemespen.com</a>.</li>
<li>Even though some of these ideas are not what you&#8217;d normally implement in a business environment, some of the concepts can obviously be transferred over to businesses trying to provide an efficient workplace for its employees.</li>
<li><a href="https://github.com/fergiemcdowall/norch">Norch</a> is developed by <a href="http://blog.comperiosearch.com/blog/author/fmcdowall/">Fergus McDowall</a>, an employee of Comerio.</li>
</ul>
<p>What if you could index your whole life and make this lifeindex available through search? What would that look like, and how could it help you? Refinding information is obviously one of the use case for this type of search. I&#8217;m guessing there&#8217;s a lot more, and I&#8217;m curious to figure them out.</p>
<h2>Actions and reactions instead of web pages</h2>
<p>I had the lifeindex idea for a little while now. Originally the idea was to index everything I browsed. From what I know and where <a href="https://github.com/fergiemcdowall/norch">Norch</a> is, it would take a while before I was anywhere close to achieving that goal. <a href="http://codepen.io/nickmoreton/blog/using-ifttt-and-google-drive-to-create-a-json-api">Then I thought of IFTTT</a>, and saw it as a &#8216;next best thing&#8217;. But then it hit me that now I&#8217;m indexing actions, and that&#8217;s way better than pages. But what I&#8217;m missing from most sources now are the reactions to my actions. If I have a question, I also want to crawl and index the answer. If I have a statement, I want to get the critique indexed.<span id="more-3069"></span></p>
<p>IFTTT and similar services (like Zapier) is quite limiting in their choice of triggers. Not sure if this is because of choices done by those services or limitations from the sites they crawl/pull information from.</p>
<p>A quick fix for this, and a generally good idea for Search Engines, would be to switch from a preview of your content to the actual content in the form of an embed-view. Here exemplified:</p>
<blockquote class="twitter-tweet" data-width="500"><p lang="en" dir="ltr">Will embed-view of your content replace the preview-pane in modern <a href="https://twitter.com/hashtag/search?src=hash&amp;ref_src=twsrc%5Etfw">#search</a>  <a href="https://twitter.com/hashtag/engine?src=hash&amp;ref_src=twsrc%5Etfw">#engine</a> solutions? Why preview when you can have the real deal?</p>
<p>&mdash; Espen Klem (@eklem) <a href="https://twitter.com/eklem/status/536866049078333440?ref_src=twsrc%5Etfw">November 24, 2014</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<h2>Technology: Hello IFTTT, Google SpreadSheet and Norch</h2>
<p>IFTTT is triggered by my actions, and stores some data to a series of spreadsheets on Google Drive. <a href="http://jsonformatter.curiousconcept.com/#https://spreadsheets.google.com/feeds/list/1B-OFzKIMVNk_3xMX_jBToGGyxSKv6FoyFYTHpGEy5O0/od6/public/values?alt=json">These spreadsheets can deliver JSON</a>. After a little document processing these JSON-files can be fed to the <a href="https://github.com/fergiemcdowall/norch#norch-indexer">Norch-indexer</a>.</p>
<h2>Why hasn&#8217;t this idea popped up earlier?</h2>
<p>Search engines used to be hardware guzzling technology. With Norch, the &#8220;NOde seaRCH&#8221; engine, that has changed. Elasticsearch and Solr are easy and small compared to i.e. SharePoint Search, but still it needs a lot of hardware. Norch can run on a Raspberry Pi, and soon it will be able to run in your browser. Maybe data sets closer to <a href="http://en.wikipedia.org/wiki/Small_data">small data</a> is more interesting than <a href="http://en.wikipedia.org/wiki/Big_data">big data</a>?</p>
<p><a href="http://youtu.be/ijLtk5TgvZg"><img src="http://blog.comperiosearch.com/wp-content/uploads/2014/11/Screen-Shot-2014-11-26-at-16.42.27-300x180.png" alt="Video: Norch running on a Raspberry Pi" width="300" height="180" class="alignnone size-medium wp-image-3075" />Norch running on a Raspberry Pi</a></p>
<h2>Why using a search engine?</h2>
<p>It&#8217;s cheap and quick. I&#8217;m not a developer, and I&#8217;ll still be able to glue all these sources together. Search engines are often a good choice when you have multiple sources. IFTTT and Google SpreadSheet makes it even easier, normalising the input and delivering it as JSON.</p>
<h2>How far in the process have I come?</h2>
<p><a href="https://testlab3.files.wordpress.com/2014/11/15140752323_1f69685449_o.png"><img class="alignnone size-full wp-image-118" src="https://testlab3.files.wordpress.com/2014/11/15140752323_1f69685449_o.png" alt="Illustration: Setting up sources in IFTTT." width="660" height="469" /></a></p>
<p>So far, I&#8217;ve set up a lot of triggers/sources at IFTTT.com:</p>
<ul>
<li>Instagram: When posting or liking both photos and videos.</li>
<li>Flickr: When posting an image, creating a set or linking a photo.</li>
<li>Google Calendar: When adding something to one of my calendars.</li>
<li>Facebook: When i post a link, is tagged, post a status message.</li>
<li>Twitter: When I tweet, retweet, reply or if somebody mentions me.</li>
<li>Youtube: When I post or like a video.</li>
<li>GitHub: When I create an issue, gets assigned to an issue or any issues that I part take in is closed.</li>
<li>WordPress: When new posts or comments on posts.</li>
<li>Android location tracking: When I enter and exit certain areas.</li>
<li>Android phone log: Placed, received and missed calls.</li>
<li>Gmail: Starred emails.</li>
</ul>
<p><a href="https://testlab3.files.wordpress.com/2014/11/screen-shot-2014-11-24-at-13-27-57.png"><img class="alignnone size-full wp-image-127" src="https://testlab3.files.wordpress.com/2014/11/screen-shot-2014-11-24-at-13-27-57.png" alt="Screen Shot 2014-11-24 at 13.27.57" width="660" height="572" /></a></p>
<p><a href="https://testlab3.files.wordpress.com/2014/11/screen-shot-2014-11-24-at-13-31-46.png"><img class="alignnone size-full wp-image-128" src="https://testlab3.files.wordpress.com/2014/11/screen-shot-2014-11-24-at-13-31-46.png" alt="Screen Shot 2014-11-24 at 13.31.46" width="660" height="194" /></a></p>
<p>And gotten a good chunk of data. Indexing my SMS&#8217;es felt a bit creepy, so I stopped doing that. And storing email just sounded too excessive, but I think starred emails would suit the purpose of the project.</p>
<p>Those Google Drive documents are giving me JSON. Not JSON that I can feed directly Norch-indexer, it needs a little trimming.</p>
<h2>Issues discovered so far</h2>
<h3>Manual work</h3>
<p>This search solution needs a lot of manual setup. Every trigger needs to be set up manually. Everytime a new trigger is triggered, I get a new spreadsheet that needs a title row added. Or else, the JSON variables will look funny, since first row is used for variable names.</p>
<p>The spreadsheets only accepts 2000 rows. After that a new file is created. Either I need to delete content, rename the file or reconfigure some stuff.</p>
<h3>Level of maturity</h3>
<p><a href="https://testlab3.files.wordpress.com/2014/11/screen-shot-2014-11-24-at-13-41-34.png"><img class="alignnone size-full wp-image-129" src="https://testlab3.files.wordpress.com/2014/11/screen-shot-2014-11-24-at-13-41-34.png" alt="Screen Shot 2014-11-24 at 13.41.34" width="660" height="664" /></a></p>
<p>IFTTT is a really nice service, and they treat their users well. But, for now, it&#8217;s not something you can trust fully.</p>
<h3>Cleaning up duplicates and obsolete stuff</h3>
<p>I have no way of removing stuff from the index automatically at this point. If I delete something I&#8217;ve added/written/created, it will not be reflected in the index.</p>
<h3>Missing sources</h3>
<p>Books I buy, music I listen to, movies and TV-series I watch. Or Amazon, Spotify, Netflix and HBO. Apart from that, there are no Norwegian services available through IFTTT.</p>
<h3>History</h3>
<p>The crawling is triggered by my actions. That leaves me without history. So, i.e. new contacts on LinkedIn is meaningless when I don&#8217;t get to index the existing ones.</p>
<h2>Next steps</h2>
<h3>JSON clean-up</h3>
<p>I need to make a document processing step. <a href="https://github.com/fergiemcdowall/norch-document-processor">Norch-document-processor</a> would be nice if it had handled JSON in addition to HTML. <a href="https://github.com/fergiemcdowall/norch-document-processor/issues/6">Not yet, but maybe in the future</a>? Anyway, there&#8217;s just a small amount of JSON clean-up before I got my data in and index.</p>
<p>When this step is done, a first version can be demoed.</p>
<h3>UX and front-end code</h3>
<p>To show the full potential, I need some interaction design of the idea. For now they&#8217;re all in my head. And these sketches needs to be converted to HTML, CSS and Angular view.</p>
<h3>Embed codes</h3>
<p>Figure out how to embed Instagram, Flickr, Facebook and LinkedIn-posts, Google Maps, federated phonebook search etc.</p>
<h3>OAUTH configuration</h3>
<p>Set up <a href="https://github.com/ciaranj/node-oauth">OAUTH NPM package</a> to access non-public spreadsheets on Google Drive. Then I can add some of the less open information I have stored.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.comperiosearch.com/blog/2014/11/26/idea-your-life-searchable-norch-node-search-ifttt-google-drive/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make an &#8220;instant search&#8221; application using JSON, Ajax and JQuery</title>
		<link>http://blog.comperiosearch.com/blog/2012/06/27/make-an-instant-search-application-using-json-ajax-and-jquery/</link>
		<comments>http://blog.comperiosearch.com/blog/2012/06/27/make-an-instant-search-application-using-json-ajax-and-jquery/#comments</comments>
		<pubDate>Wed, 27 Jun 2012 10:41:15 +0000</pubDate>
		<dc:creator><![CDATA[Fergus McDowall]]></dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Json]]></category>
		<category><![CDATA[OpenSearch]]></category>
		<category><![CDATA[Wikipedia]]></category>

		<guid isPermaLink="false">http://blog.comperiosearch.com/?p=975</guid>
		<description><![CDATA[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 &#8220;instant search&#8221; service using JSON, ajax and JQuery. This instant search application uses the excellent OpenSearch interface provided by [...]]]></description>
				<content:encoded><![CDATA[<p><em><strong>Update 20th Feb 2013:</strong> Instant search is now implemented on <a href="http://blog.comperiosearch.com/blog/2013/02/17/introducing-solrstrap/" title="Introducing Solrstrap: A blazing fast tool for querying Solr in a Googleish fashion">Solrstrap</a>, the lightweight Solr interface written in JavaScript, HTML and CSS. <a href="http://blog.comperiosearch.com/blog/2013/02/17/introducing-solrstrap/" title="Introducing Solrstrap: A blazing fast tool for querying Solr in a Googleish fashion">Check it out here</a></em>.</p>
<p>Here is a quick demo that demonstrates how to create an &#8220;instant search&#8221; 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.</p>
<p>The Wikipedia query API is described in some detail <a href="http://www.mediawiki.org/wiki/API:Main_page" target="_blank">here</a>.</p>
<p><a href="http://blog.comperiosearch.com/wp-content/uploads/2012/06/instantsearch.html">Click here to see the demo</a>, or copy and paste the code below into a blank HTML document.</p><pre class="crayon-plain-tag">&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;</pre><p></p>
<h1>Search Wikipedia!</h1>
<p></p><pre class="crayon-plain-tag">&lt;input id=&quot;searchterm&quot; type=&quot;text&quot; /&gt; &lt;button id=&quot;search&quot;&gt;search&lt;/button&gt;</pre><p></p>
<div id="results"></div>
<p></p><pre class="crayon-plain-tag">&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
      $(&quot;#searchterm&quot;).keyup(function(e){
        var q = $(&quot;#searchterm&quot;).val();
        $.getJSON(&quot;http://en.wikipedia.org/w/api.php?callback=?&quot;,
        {
          srsearch: q,
          action: &quot;query&quot;,
          list: &quot;search&quot;,
          format: &quot;json&quot;
        },
        function(data) {
          $(&quot;#results&quot;).empty();
          $(&quot;#results&quot;).append(&quot;

Results for &lt;b&gt;&quot; + q + &quot;&lt;/b&gt;

&quot;);
          $.each(data.query.search, function(i,item){
            $(&quot;#results&quot;).append(&quot;
&lt;div&gt;&lt;a href='http://en.wikipedia.org/wiki/&quot; + encodeURIComponent(item.title) + &quot;'&gt;&quot; + item.title + &quot;&lt;/a&gt;&quot; + item.snippet + &quot;&lt;/div&gt;
&quot;);
          });
        });
      });

// ]]&gt;&lt;/script&gt;</pre><p></p>
<div style="position: absolute; bottom: 0; right: 0; text-align: right;"><a href="http://blog.comperiosearch.com/author/fmcdowall/">Fergus McDowall</a> 2012</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.comperiosearch.com/blog/2012/06/27/make-an-instant-search-application-using-json-ajax-and-jquery/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Super Fast Image Search with JSON, JQuery and Flickr</title>
		<link>http://blog.comperiosearch.com/blog/2012/03/14/super-simple-image-search-json-jquery-flickr/</link>
		<comments>http://blog.comperiosearch.com/blog/2012/03/14/super-simple-image-search-json-jquery-flickr/#comments</comments>
		<pubDate>Wed, 14 Mar 2012 11:36:02 +0000</pubDate>
		<dc:creator><![CDATA[Fergus McDowall]]></dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Flickr]]></category>
		<category><![CDATA[image search]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Json]]></category>
		<category><![CDATA[search]]></category>

		<guid isPermaLink="false">http://nuggets.comperiosearch.com/?p=860</guid>
		<description><![CDATA[Here is a way to build up a really simple image search application using HTML, CSS and JQuery. One thing that can be improved about most image search apps is that browsing search history is sloooow. This image search app provides a neat solution to the history/speed issue by simply displaying results in a push-pop [...]]]></description>
				<content:encoded><![CDATA[<p>Here is a way to build up a really simple image search application using HTML, CSS and JQuery. One thing that <a href="http://therealfirstworldproblems.tumblr.com/">can be improved</a> about most image search apps is that browsing search history is sloooow.</p>
<p>This image search app provides a neat solution to the history/speed issue by simply displaying results in a <em>push-pop</em> stack. As you type in new search terms, the image thumbnails are prepended to the resultset. Your search history stays on the page, but is simply pushed further down as new thumbnails appear. Its is really fast and simple to browse your image search history.</p>
<p>Also, this search app operates entirely in 30 lines of HTML and JavaScript by using a JSON feed to the flickr API. Simple and elegant.</p>
<p><a href='http://blog.comperiosearch.com/wp-content/uploads/2012/03/super-simple-image-search.html'>Click here for the demo</a></p>
<p>Or copy and paste the code below this line:</p><pre class="crayon-plain-tag">&lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;
    &lt;title&gt;Comperio Super Simple Image Search&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    Search for &lt;b&gt;cats, dogs, cakes&lt;/b&gt;, or anything else that takes your fancy :-)
    &lt;br /&gt;
    &lt;input id=&quot;searchterm&quot; /&gt;
    &lt;button id=&quot;search&quot;&gt;search&lt;/button&gt;
    &lt;div id=&quot;results&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
      $(&quot;#search&quot;).click(function(){
        $.getJSON(&quot;http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&quot;,
        {
          tags: $(&quot;#searchterm&quot;).val(),
          tagmode: &quot;any&quot;,
          format: &quot;json&quot;
        },
        function(data) {
          $.each(data.items, function(i,item){
            $(&quot;&lt;img/&gt;&quot;).attr(&quot;src&quot;, item.media.m).prependTo(&quot;#results&quot;);
            if ( i == 10 ) return false;
          });
        });
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre><p></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.comperiosearch.com/blog/2012/03/14/super-simple-image-search-json-jquery-flickr/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Asynchronous search results with JQuery, Solr, Json and Ajax</title>
		<link>http://blog.comperiosearch.com/blog/2011/03/31/asynchronous-search-results-jquery-solr-json-ajax/</link>
		<comments>http://blog.comperiosearch.com/blog/2011/03/31/asynchronous-search-results-jquery-solr-json-ajax/#comments</comments>
		<pubDate>Thu, 31 Mar 2011 13:52:40 +0000</pubDate>
		<dc:creator><![CDATA[Fergus McDowall]]></dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Json]]></category>
		<category><![CDATA[Solr]]></category>

		<guid isPermaLink="false">http://nuggets.comperiosearch.com/?p=369</guid>
		<description><![CDATA[Update: Aug 5th 2012 A live demo of asynchronous search results with JQuery, Solr, Json and Ajax can now be found here There are many reasons to load search results asynchronously- most of the big searchy dotcoms are going in this direction with Google, Facebook and Twitter all relying heavily on ajax to render their [...]]]></description>
				<content:encoded><![CDATA[<p><a href="http://blog.comperiosearch.com/wp-content/uploads/2011/03/solr.jpg"><img src="http://blog.comperiosearch.com/wp-content/uploads/2011/03/solr.jpg" alt="Solr is the popular, blazing fast open source enterprise search platform from the Apache Lucene project" title="Solr Logo" width="283" height="156" class="alignleft size-full wp-image-376" /></a></p>
<p><strong>Update: Aug 5th 2012</strong><a href="http://blog.comperiosearch.com/wp-content/uploads/2012/09/solr.html"> A live demo of asynchronous search results with JQuery, Solr, Json and Ajax can now be found here</a></p>
<p>There are many reasons to load search results asynchronously- most of the big searchy dotcoms are going in this direction with Google, Facebook and Twitter all relying heavily on <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29">ajax</a> to render their feed-based pages.</p>
<p>Considering how mainstream it has become, information on the nuts and bolts of the technique remain thin on the ground. So here is a really quick overview of what you need to get started.</p>
<p>For the purposes of this post I will assume that you have an working installation of <a href="http://lucene.apache.org/solr/">Solr</a> in a more or less standard configuration. Getting Solr up and running is no mean feat in itself, but mercifully there are a number of fairly decent guides squirreled away on the internet. You could of course use any search motor that returns search results in a Json format, in fact even if they dont, <a href="http://www.comperiosearch.com/products/comperio-front/">Comperio Front</a> can now be used to provide a <a href="http://www.json.org/">JSON</a> query service on any (collection of) search motor(s).</p>
<p>So lets assume that a query for &#8220;Ford&#8221; returns Json in the following format from our very small index of cars. Note that the Solr URL for this feed would look something like this: http://localhost:8080/solr/select/?q=ford&amp;wt=json&amp;json.wrf=?&amp;indent=true where wt specifies json and json.wrf specifies the <a href="http://stackoverflow.com/questions/483073/getting-a-better-understanding-of-callback-functions-in-javascript">callback</a></p><pre class="crayon-plain-tag">({
  &quot;responseHeader&quot;:{
    &quot;status&quot;:0,
    &quot;QTime&quot;:1,
    &quot;params&quot;:{
      &quot;json.wrf&quot;:&quot;?&quot;,
      &quot;indent&quot;:&quot;true&quot;,
      &quot;q&quot;:&quot;ford&quot;,
      &quot;wt&quot;:&quot;json&quot;}},
  &quot;response&quot;:{&quot;numFound&quot;:3,&quot;start&quot;:0,&quot;docs&quot;:[
      {
        &quot;id&quot;:&quot;147&quot;,
        &quot;name&quot;:&quot;Ford Capri&quot;,
        &quot;description&quot;:&quot;pink 1978 model- great condition&quot;,
        &quot;owner&quot;:&quot;576463865&quot;,
        &quot;store&quot;:&quot;59.7440738,10.204456400000026&quot;,
        &quot;tags&quot;:[
          &quot;Ford, Capri, Pink, 1978&quot;]},
      {
        &quot;id&quot;:&quot;148&quot;,
        &quot;name&quot;:&quot;Ford Orion&quot;,
        &quot;description&quot;:&quot;Blue, Good runner&quot;,
        &quot;owner&quot;:&quot;576463865&quot;,
        &quot;store&quot;:&quot;59.9138688,10.752245399999993&quot;,
        &quot;tags&quot;:[
          &quot;blue, orion, 1.6&quot;]},
      {
        &quot;id&quot;:&quot;149&quot;,
        &quot;name&quot;:&quot;Ford Anglia&quot;,
        &quot;description&quot;:&quot;As seen in Harry Potter, Can be flown&quot;,
        &quot;owner&quot;:&quot;576463865&quot;,
        &quot;store&quot;:&quot;57.2366283,-2.2650615999999673&quot;,
        &quot;tags&quot;:[
          &quot;Harry Potter, Anglia, Flying car&quot;]}
    ]
  }
})</pre><p></p>
<p>We can now parse this feed by using the .getJSON function in the excellent jQuery library. The javascript and associated HTML would be more or less like so:</p><pre class="crayon-plain-tag">&lt;div id=&quot;rs&quot;&gt;&lt;/div&gt;
  &lt;script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
    $.getJSON(&quot;http://localhost:8080/solr/select/?q=ford&amp;wt=json&amp;json.wrf=?&amp;indent=true&quot;, function(result){
    var Parent = document.getElementById('rs');
    for (var i = 0; i &lt; result.response.docs.length; i++) {
      var thisResult = &quot;&lt;b&gt;&quot; + result.response.docs[i].name + &quot;&lt;/b&gt;&lt;br&gt;&quot; + result.response.docs[i].description
      + &quot;, &quot; + result.response.docs[i].tags + &quot;&lt;br&gt;&quot;;
      var NewDiv = document.createElement(&quot;DIV&quot;);
      NewDiv.innerHTML = thisResult;
      Parent.appendChild(NewDiv);
    }
  });
&lt;/script&gt;</pre><p>And thats it :-) You will notice that when the HTML above is loaded in a browser, that the search results are returned independently of the webpage.</p>
<p><strong>Next Steps:</strong> <a href="http://blog.comperiosearch.com/2012/09/using-handlebars-js-to-display-results-from-solr-a-primer/" title="Using Handlebars.js To Display Results From Solr- A Primer">Use JavaScript templating to render results from Solr</a></p>
<a href="http://blog.comperiosearch.com/wp-content/uploads/2011/03/solr.jpg"><img src="http://blog.comperiosearch.com/wp-content/uploads/2011/03/solr.jpg" alt="Solr is the popular, blazing fast open source enterprise search platform from the Apache Lucene project" title="Solr Logo" width="283" height="156" class="size-full wp-image-376" /></a>
]]></content:encoded>
			<wfw:commentRss>http://blog.comperiosearch.com/blog/2011/03/31/asynchronous-search-results-jquery-solr-json-ajax/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
