login/register

Snip!t from collection of Alan Dix

see all channels for Alan Dix

Snip
summary

Code Drop: VisualSearch.js
Posted
Jun 23rd, 2011
Tags
... t, so you don’t have to manually re-parse it yourself.

Latest Updates - DocumentCloud
http://blog.documentcloud.org/blog/2011/06/code-drop-visualsearch-js/

Categories

/Channels/search

[ go to category ]

/Channels/techie/JavaScript

[ go to category ]

/Channels/techie/web development

[ go to category ]

For Snip

loading snip actions ...

For Page

loading url actions ...

Code Drop: VisualSearch.js

Posted
Jun 23rd, 2011

Tags
Code

Author
Samuel Clay

Over the past two years, we have released much of our toolset as open-source code: Backbone.js, Underscore.js, Jammit, CloudCrowd, and others. Today, we’re launching another piece of DocumentCloud — both on DocumentCloud.org and as a component you can integrate into your own projects. VisualSearch.js is a rich search box for real data. It enhances ordinary search boxes with the ability to autocomplete facets and values for sophisticated searches.

For example, here’s a query that filters The New York Times’ copies of Sarah Palin’s recently-released emails. First we filter just the annotated emails, then just the emails from 2007, and then drill down to a specific date. Visual search works with the arbitrary metadata you’ve already added to your documents.

You can use VisualSearch.js on your site by including the necessary JavaScript, CSS, images, and dependencies. All of these files are outlined on the VisualSearch.js site on GitHub. The complete annotated source code is also available. You can customize the categories and facet values to be either arrays of values or fetched from a server with an AJAX callback. You can change which facets need quotes (titles, names, etc) and which are fine as a single word (slugs, single word filters, etc). The parsed search query is available as a JSON object, so you don’t have to manually re-parse it yourself.

HTML

<h2 id="post-145661"><a href="http://blog.documentcloud.org/blog/2011/06/code-drop-visualsearch-js/" rel="bookmark">Code Drop: VisualSearch.js</a></h2> <div class="meta"> <p><strong>Posted</strong><br> Jun 23rd, 2011</p> <p><strong>Tags</strong><br> <a href="http://blog.documentcloud.org/blog/category/code/" title="View all posts in Code" rel="category tag">Code</a> </p> <p><strong>Author</strong><br> Samuel Clay <span class="edit"></span></p> <!--<p><strong>8 Comments</strong><br /> <a href="http://blog.documentcloud.org/blog/2011/06/code-drop-visualsearch-js/#comments">See all</a> | <a href="http://blog.documentcloud.org/blog/2011/06/code-drop-visualsearch-js/#comments">Add your own</a>--> <p></p> </div> <div class="post"> <p>Over the past two years, we have released much of our toolset as open-source code:&nbsp;<a href="http://documentcloud.github.com/backbone">Backbone.js</a>, <a href="http://documentcloud.github.com/underscore">Underscore.js</a>, <a href="http://documentcloud.github.com/jammit">Jammit</a>, <a href="http://github.com/documentcloud/cloud-crowd">CloudCrowd</a>, and <a href="http://github.com/documentcloud">others</a>. Today, we&#x2019;re&nbsp;launching another piece of DocumentCloud &#x2014; both on DocumentCloud.org and as a component you can integrate into your own projects.&nbsp;<a href="http://documentcloud.github.com/visualsearch">VisualSearch.js</a> is a rich search box for real data. It enhances ordinary search boxes with the ability to autocomplete facets and values for sophisticated searches.</p> <p>For example, <a href="https://www.documentcloud.org/public/#search/group%3A%20nytimes%20palin%20filter%3A%20annotated%20year%3A%20%222007%22">here&#x2019;s a query</a> that filters The New York Times&#x2019; copies of Sarah Palin&#x2019;s recently-released emails. First we filter just the annotated emails, then just the emails from 2007, and then drill down to a specific date. Visual search works with the <a href="http://blog.documentcloud.org/blog/2011/05/arbitrary-metadata/">arbitrary metadata</a> you&#x2019;ve already added to your documents.</p> <p><img class="alignnone size-full wp-image-145665" title="VisualSearch on DocumentCloud" src="http://blog.documentcloud.org/wp-content/uploads/2011/06/Screen-shot-2011-06-23-at-11.19.png" alt="" height="329" width="625"></p> <p>You can use VisualSearch.js on your site by including the necessary JavaScript, CSS, images, and dependencies. All of these files are outlined on the <a href="http://documentcloud.github.com/visualsearch">VisualSearch.js site on GitHub</a>. The complete <a href="http://documentcloud.github.com/visualsearch/docs/visualsearch.html">annotated source code</a> is also available.&nbsp;You can customize the categories and facet values to be either arrays of values or fetched from a server with an AJAX callback. You can change which facets need quotes (titles, names, etc) and which are fine as a single word (slugs, single word filters, etc). The parsed search query is available as a JSON object, so you don&#x2019;t have to manually re-parse it yourself.</p></div>