Cloud search box JQuery

by gkohen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://documentcloud.github.io/visualsearch/build/visualsearch.js"></script>
<link rel="stylesheet" href="http://documentcloud.github.io/visualsearch/build/visualsearch.css">
<link rel="stylesheet" href="http://documentcloud.github.io/visualsearch/build-min/visualsearch-datauri.css">
 <div class="container" id="VS">
    <div class="visual_search"></div>
</div>

CSS

body {
      font-size: 16px;
      line-height: 24px;
      background: #FEF3CA;
      color: #022;
      height: 100%;
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
    }
div.container {
      width: 720px;
      margin: 50px 0 50px 50px;
    }

    div.container  {
      margin: 18px 0;
      opacity: 0;
    }
      div.container  .raquo {
        font-size: 18px;
        line-height: 12px;
        font-weight: bold;
    margin-right: 4px;}

    div.container code, div.container pre, div.container tt {
      font-family: Monaco, Consolas, "Lucida Console", monospace;
      font-size: 12px;
      line-height: 18px;
      color: #444;
      background: none;
    }
      div.container code {
        margin-left: 8px;
        padding: 0 0 0 12px;
        font-weight: normal;
      }
      div.container pre {
        font-size: 12px;
        padding: 2px 0 2px 0;
        border-left: 6px solid #829C37;
        margin: 12px 0;
      }

JavaScript

$(document).ready(function() {
        window.visualSearch = VS.init({
          container  : $('#search_box_container'),
          query      : 'country: "United States" account: 5-samuel "U.S. State": California',
          showFacets : true,
          unquotable : [
            'text',
            'account',
            'filter',
            'access'
          ],
          callbacks  : {
            search : function(query, searchCollection) {
              var $query = $('#search_query');
              $query.stop().animate({opacity : 1}, {duration: 300, queue: false});
              $query.html('<span class="raquo">&raquo;</span> You searched for: <b>' + searchCollection.serialize() + '</b>');
              clearTimeout(window.queryHideDelay);
              window.queryHideDelay = setTimeout(function() {
                $query.animate({
                  opacity : 0
                }, {
                  duration: 1000,
                  queue: false
                });
              }, 2000);
            },
            valueMatches : function(category, searchTerm, callback) {
              switch (category) {
              case 'account':
                  callback([
                    { value: '1-amanda', label: 'Amanda' },
                    { value: '2-aron',   label: 'Aron' },
                    { value: '3-eric',   label: 'Eric' },
                    { value: '4-jeremy', label: 'Jeremy' },
                    { value: '5-samuel', label: 'Samuel' },
                    { value: '6-scott',  label: 'Scott' }
                  ]);
                  break;
                case 'filter':
                  callback(['published', 'unpublished', 'draft']);
                  break;
                case 'access':
                  callback(['public', 'private', 'protected']);
                  break;
                case 'title':
                  callback([
                    'Pentagon Papers',
                    'CoffeeScript Manual',
                   ...