Latest Updates: Our Blog

Code Drop: VisualSearch.js

Jun 23rd, 2011


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

We are excited to not only see what clever uses developers come up with for VisualSearch, but also what additions you write that can be merged back into the main repository.

7 Responses to 'Code Drop: VisualSearch.js'

Subscribe to comments with RSS

  1. very cool. one problem I had with the demo is it confuses backspace since it is used to delete characters and also go “back” in the browser. so when I used it, sometimes it deleted characters and sometimes it would go “back” (e.g. adding back the words I just deleted!)

    any ideas how to fix this?


    23 Jun 11 at 6:10 pm

  2. This is very cool. We’ll be looking to implement that in our customer support system so people can easily filter their search results. I love the fact that you guys are contributing back to the open source community!


    23 Jun 11 at 6:39 pm

  3. Hi Jeff.

    As long as you’re focused in the search box, “delete / backspace” should delete characters. If you’re not focused in the search box, many browsers use “delete” to mean “go back a page”.

    Is there a particular sequence of characters you can type in the search box that will allow us to reproduce the issue?

    Jeremy Ashkenas

    23 Jun 11 at 6:43 pm

  4. Yes if you hold down the back button on OSX the browser will eventually catch it as a “browser-back” instead of “character-delete”. I’m guessing as it focuses in and out of pseudo input fields.


    23 Jun 11 at 7:19 pm

  5. Huh. I can’t reproduce that in Firefox, Safari, or Chrome on OSX. Holding down the delete key just eats up the text back to the beginning of the box, and stops there.

    What browser and version are you using? If you can reproduce it consistently, feel free to open a ticket here:

    Jeremy Ashkenas

    23 Jun 11 at 7:25 pm

  6. On IE9, I am on the Sarah Palin example page, and I hold backspace, which deletes some things and then does a bunch of back buttons.

    On Opera, on the Sarah Palin example page, I press backspace and it only deletes the values (like 2007) and not the attributes (like YEAR). If I press it again, it will do a browser back.

    The focus is always in the textbox.


    23 Jun 11 at 9:06 pm

  7. I opened a ticket. Good luck — I know browser issues are tricky :-)


    23 Jun 11 at 9:07 pm

Leave a Reply