<script src="/static/js/jquery-2.1.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap3-typeahead.min.js"></script>
    <script>

var typeaheadTimerId = null;

doTypeahead = function(query, process) {
  if (typeaheadTimerId) {
    clearTimeout(typeaheadTimerId);
  }
  typeaheadTimerId = setTimeout(function() {
    typeaheadCallback(query, process);
  }, 300);
};

var entriesMap = {};

typeaheadCallback = function(query, process) {
  var typeaheadEntries = [];
  entriesMap = {};
  $.ajax({
    url: "/suggest",
    data: {term: query},
    dataType: "json",
    success: function(data, status, jqxhr) {
      $.each(data, function(idx, entry) {
        entriesMap[entry.label] = entry.book_id;
        typeaheadEntries.push(entry.label);
      });
      process(typeaheadEntries);
    }
  });
};

typeaheadUpdater = function(item) {
  //this.$element[0].value = entriesMap[item];
  //this.$element[0].form.submit();
  var bookUrl = '/book/' + entriesMap[item];
  window.location.href = bookUrl;
  return item;
};

$(document).ready(function() {
  $("#search_field").typeahead({
    source: doTypeahead,
    updater: typeaheadUpdater,
    items: 12,
    autoSelect: false
  });

  $(".debug-toggle").click(function() {
    $(".debug").show();
  });
});
    </script>