<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Suggestions Demo</title>
  <style>
    body {
      font-family: 'Helvetica Neue', arial, helvetica, verdana, sans-serif;
      font-size: 13px;
    }
    
    #container {
      width: 500px;
      margin: 0 auto;
    }
    
    input.suggestions {
      width: 200px;
      padding: 3px;
    }
    
    .suggestions-menu {
      position: absolute;
      width: 186px;
      margin: 0;
      padding: 10px;
      border: solid 1px #333;
    }
    
    .suggestions-menu ol, .suggestions-menu ol li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .suggestions-menu ol li a, .suggestions-menu ol li a:link, .suggestions-menu ol li a:visited,
    .suggestions-menu ol li a:hover, .suggestions-menu ol li a:active {
      color: #333;
      text-decoration: none;
    }
    
    .suggestions-menu ol li.selected a, .suggestions-menu ol li.selected a:link, .suggestions-menu ol li.selected a:visited,
    .suggestions-menu ol li.selected a:hover, .suggestions-menu ol li.selected a:active {
      color: #C00;
    }
    
    input {
      margin: 0;
    }
  </style>
</head>
<body>
  <div>
    <a href="javascript:void(0)" id="suggestion-destroy">Destroy</a>
  </div>
  <div id='container'>
    <label for='state'>State:</label> <div><input type='text' id='state' name='state' class='suggestions'></div>
  </div>
  
  <script src="js/localStorage-polyfill.min.js"></script>
  <script src="js/underscore-1.3.1.js"></script>
  <script src="js/json2.min.js"></script>
  <script src="js/jquery-1.7.min.js"></script>
  <script src="js/backbone-0.9.2.js"></script>
  <script src="js/backbone-sync-storageEngines.js"></script>
  <script src="js/backbone-suggestions.js"></script>
  
  <script>    
    $(function() {
      sv = new Suggestions.View({
        el: $('#state'),
        ajax: { url: '/suggestions.json?p=:page&t=:take&q=:query' },
        cache: false,
        take: 2
      });

      $('#suggestion-destroy').on('click', function() {
        sv.destroy();
      });
    });
  </script>
  
</body>
</html>