demo.html

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <title>DocumentCloud's VisualSearch.js</title>
  <style>
    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;
    }
    p, li {
      margin: 16px 0 16px 0;
      width: 550px;
    }
      p.break {
        margin-top: 35px;
      }
    ol {
      padding-left: 24px;
    }
      ol li {
        font-weight: bold;
        margin-left: 0;
      }
    a, a:visited {
      padding: 0 2px;
      text-decoration: none;
      background: #f0c095;
      color: #252519;
    }
    a:active, a:hover {
      color: #FFF;
      background: #C25D00;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-top: 40px;
    }
    b.header {
      font-size: 18px;
    }
    span.alias {
      font-size: 14px;
      font-style: italic;
      margin-left: 20px;
    }
    table {
      margin: 16px 0; padding: 0;
    }
      tr, td, th {
        margin: 0; padding: 0;
        text-align: left;
      }
        th {
          padding: 24px 0 0;
        }
        tr:first-child th {
          padding-top: 0;
        }
        td {
          padding: 6px 15px 6px 0;
        }
          td.definition {
            line-height: 18px;
            font-size: 14px;
          }
    table.downloads td {
      padding-left: 18px;
    }
    .demo-hint {
      font-size: 13px;
      margin: 0 0 12px 12px;
      font-weight: normal;
    }
    #VS code, #VS pre, #VS tt {
      font-family: Monaco, Consolas, "Lucida Console", monospace;
      font-size: 12px;
      line-height: 18px;
      color: #444;
      background: none;
    }
      #VS code {
        margin-left: 8px;
        padding: 0 0 0 12px;
        font-weight: normal;
      }
      #VS pre {
        font-size: 12px;
        padding: 2px 0 2px 0;
        border-left: 6px solid #829C37;
        margin: 12px 0;
      }
    #search_query {
      margin: 18px 0;
      opacity: 0;
    }
      #search_query .raquo {
        font-size: 18px;
        line-height: 12px;
        font-weight: bold;
        margin-right: 4px;
      }
    #search_query2 {
      margin: 18px 0;
      opacity: 0;
    }
      #search_query2 .raquo {
        font-size: 18px;
        line-height: 12px;
        font-weight: bold;
        margin-right: 4px;
      }
  </style>

  <link rel="stylesheet" href="lib/css/reset.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="lib/css/icons.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="lib/css/workspace.css" type="text/css" media="screen" charset="utf-8">

  <script src="vendor/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <!-- <script src="vendor/backported/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script> -->
  <script src="vendor/jquery.ui.core.js" type="text/javascript" charset="utf-8"></script>
  <script src="vendor/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
  <script src="vendor/jquery.ui.position.js" type="text/javascript" charset="utf-8"></script>
  <script src="vendor/jquery.ui.menu.js" type="text/javascript" charset="utf-8"></script>
  <script src="vendor/jquery.ui.autocomplete.js" type="text/javascript" charset="utf-8"></script>
  <script src="vendor/underscore-1.5.2.js" type="text/javascript" charset="utf-8"></script>
  <script src="vendor/backbone-1.1.0.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/visualsearch.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/views/search_box.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/views/search_facet.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/views/search_input.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/models/search_facets.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/models/search_query.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/utils/backbone_extensions.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/utils/hotkeys.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/utils/jquery_extensions.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/utils/search_parser.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/utils/inflector.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/js/templates/templates.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

  <div class="container" id="VS">

    <h1><a href="index.html">VisualSearch.js</a></h1>

    <p>
      <a href="http://github.com/documentcloud/visualsearch">VisualSearch.js</a>
      enhances ordinary search boxes with the ability to autocomplete
      faceted search queries. Specify the facets for completion, along with the
      completable values for any facet. You can retrieve the search query as a
      structured object, so you don't have to parse the query string yourself.
    </p>

    <p>
      <a href="docs/visualsearch.html">The complete annotated source code</a>
      is also available.
    </p>

    <p>
      The project is
      <a href="http://github.com/documentcloud/visualsearch/">hosted on GitHub</a>.
      You can report bugs and discuss features on the
      <a href="http://github.com/documentcloud/visualsearch/issues">issues page</a>,
      on Freenode in the <tt>#documentcloud</tt> channel,
      or send tweets to <a href="http://twitter.com/documentcloud">@documentcloud</a>.
    </p>

    <p>
      <i>VisualSearch.js is an open-source component of <a href="http://documentcloud.org/">DocumentCloud</a>.</i>
    </p>
    <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>, <b>filter</b>, <b>access</b>, <b>title</b>, <b>city</b>, <b>state</b>, or <b>country</b>.</i></span></h2>

    <div id="search_box_container"></div>
    <div id="search_query">&nbsp;</div>

    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
        window.visualSearch = VS.init({
          container  : $('#search_box_container'),
          query      : 'country: "United States" account: 5-samuel "U.S. State": California',
          showFacets : true,
          readOnly   : false,
          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',
                    'Laboratory for Object Oriented Thinking',
                    'A Repository Grows in Brooklyn'
                  ]);
                  break;
                case 'city':
                  callback([
                    'Cleveland',
                    'New York City',
                    'Brooklyn',
                    'Manhattan',
                    'Queens',
                    'The Bronx',
                    'Staten Island',
                    'San Francisco',
                    'Los Angeles',
                    'Seattle',
                    'London',
                    'Portland',
                    'Chicago',
                    'Boston'
                  ])
                  break;
                case 'U.S. State':
                  callback([
                    "Alabama", "Alaska", "Arizona", "Arkansas", "California",
                    "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
                    "Georgia", "Guam", "Hawaii", "Idaho", "Illinois",
                    "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana",
                    "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
                    "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada",
                    "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina",
                    "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania",
                    "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
                    "Texas", "Utah", "Vermont", "Virginia", "Virgin Islands",
                    "Washington", "West Virginia", "Wisconsin", "Wyoming"
                  ]);
                  break
                case 'country':
                  callback([
                    "China", "India", "United States", "Indonesia", "Brazil",
                    "Pakistan", "Bangladesh", "Nigeria", "Russia", "Japan",
                    "Mexico", "Philippines", "Vietnam", "Ethiopia", "Egypt",
                    "Germany", "Turkey", "Iran", "Thailand", "D. R. of Congo",
                    "France", "United Kingdom", "Italy", "Myanmar", "South Africa",
                    "South Korea", "Colombia", "Ukraine", "Spain", "Tanzania",
                    "Sudan", "Kenya", "Argentina", "Poland", "Algeria",
                    "Canada", "Uganda", "Morocco", "Iraq", "Nepal",
                    "Peru", "Afghanistan", "Venezuela", "Malaysia", "Uzbekistan",
                    "Saudi Arabia", "Ghana", "Yemen", "North Korea", "Mozambique",
                    "Taiwan", "Syria", "Ivory Coast", "Australia", "Romania",
                    "Sri Lanka", "Madagascar", "Cameroon", "Angola", "Chile",
                    "Netherlands", "Burkina Faso", "Niger", "Kazakhstan", "Malawi",
                    "Cambodia", "Guatemala", "Ecuador", "Mali", "Zambia",
                    "Senegal", "Zimbabwe", "Chad", "Cuba", "Greece",
                    "Portugal", "Belgium", "Czech Republic", "Tunisia", "Guinea",
                    "Rwanda", "Dominican Republic", "Haiti", "Bolivia", "Hungary",
                    "Belarus", "Somalia", "Sweden", "Benin", "Azerbaijan",
                    "Burundi", "Austria", "Honduras", "Switzerland", "Bulgaria",
                    "Serbia", "Israel", "Tajikistan", "Hong Kong", "Papua New Guinea",
                    "Togo", "Libya", "Jordan", "Paraguay", "Laos",
                    "El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
                    "Slovakia", "Finland", "Eritrea", "Turkmenistan"
                  ], {
                    preserveOrder: true // Otherwise the selected value is brought to the top
                  });
                  break;
              }
            },
            facetMatches : function(callback) {
              callback([
                'account', 
                'filter', 
                'access', 
                'title',
                { label: 'city',        category: 'location' },
                { label: 'address',     category: 'location' },
                { label: 'country',     category: 'location' },
                { label: 'U.S. State',  category: 'location' },
              ]);
            }
          }
        });
      });
    </script>


    <div id="search_box_container2"></div>
    <div id="search_query2">&nbsp;</div>

    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
        var visualSearch = VS.init({
          container  : $('#search_box_container2'),
          query      : '',
          minLength  : 0,
          showFacets : true,
          readOnly   : false,
          unquotable : [
            'text',
            'account',
            'filter',
            'access'
          ],
          placeholder : "Search for your documents...",
          callbacks  : {
            search : function(query, searchCollection) {
              var $query = $('#search_query2');
              $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.queryHideDelay2);
              window.queryHideDelay2 = 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',
                    'Laboratory for Object Oriented Thinking',
                    'A Repository Grows in Brooklyn'
                  ]);
                  break;
                case 'city':
                  callback([
                    'Cleveland',
                    'New York City',
                    'Brooklyn',
                    'Manhattan',
                    'Queens',
                    'The Bronx',
                    'Staten Island',
                    'San Francisco',
                    'Los Angeles',
                    'Seattle',
                    'London',
                    'Portland',
                    'Chicago',
                    'Boston'
                  ])
                  break;
                case 'state':
                  callback([
                    "Alabama", "Alaska", "Arizona", "Arkansas", "California",
                    "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
                    "Georgia", "Guam", "Hawaii", "Idaho", "Illinois",
                    "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana",
                    "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
                    "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada",
                    "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina",
                    "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania",
                    "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
                    "Texas", "Utah", "Vermont", "Virginia", "Virgin Islands",
                    "Washington", "West Virginia", "Wisconsin", "Wyoming"
                  ]);
                  break
                case 'country':
                  callback([
                    "China", "India", "United States", "Indonesia", "Brazil",
                    "Pakistan", "Bangladesh", "Nigeria", "Russia", "Japan",
                    "Mexico", "Philippines", "Vietnam", "Ethiopia", "Egypt",
                    "Germany", "Turkey", "Iran", "Thailand", "D. R. of Congo",
                    "France", "United Kingdom", "Italy", "Myanmar", "South Africa",
                    "South Korea", "Colombia", "Ukraine", "Spain", "Tanzania",
                    "Sudan", "Kenya", "Argentina", "Poland", "Algeria",
                    "Canada", "Uganda", "Morocco", "Iraq", "Nepal",
                    "Peru", "Afghanistan", "Venezuela", "Malaysia", "Uzbekistan",
                    "Saudi Arabia", "Ghana", "Yemen", "North Korea", "Mozambique",
                    "Taiwan", "Syria", "Ivory Coast", "Australia", "Romania",
                    "Sri Lanka", "Madagascar", "Cameroon", "Angola", "Chile",
                    "Netherlands", "Burkina Faso", "Niger", "Kazakhstan", "Malawi",
                    "Cambodia", "Guatemala", "Ecuador", "Mali", "Zambia",
                    "Senegal", "Zimbabwe", "Chad", "Cuba", "Greece",
                    "Portugal", "Belgium", "Czech Republic", "Tunisia", "Guinea",
                    "Rwanda", "Dominican Republic", "Haiti", "Bolivia", "Hungary",
                    "Belarus", "Somalia", "Sweden", "Benin", "Azerbaijan",
                    "Burundi", "Austria", "Honduras", "Switzerland", "Bulgaria",
                    "Serbia", "Israel", "Tajikistan", "Hong Kong", "Papua New Guinea",
                    "Togo", "Libya", "Jordan", "Paraguay", "Laos",
                    "El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
                    "Slovakia", "Finland", "Eritrea", "Turkmenistan"
                  ]);
                  break;
              }
            },
            facetMatches : function(callback) {
              callback([
                'account', 'filter', 'access', 'title',
                { label: 'city',    category: 'location' },
                { label: 'address', category: 'location' },
                { label: 'country', category: 'location' },
                { label: 'state',   category: 'location' },
              ], {
                  preserveOrder: true
              });
            }
          }
        });
      });
    </script>
    
  </div>

</body>
</html>