<script>
  jQuery(document).ready(function() {
    descriptionsSuggester = new Bloodhound({
      local:#{toBloodhoundJson (toList descriptions)},
      limit:100,
      datumTokenizer: function(d) { return [d.value]; },
      queryTokenizer: function(q) { return [q]; }
    });
    descriptionsSuggester.initialize();

    accountsSuggester = new Bloodhound({
      local:#{toBloodhoundJson (journalAccountNamesDeclaredOrImplied j)},
      limit:100,
      datumTokenizer: function(d) { return [d.value]; },
      queryTokenizer: function(q) { return [q]; }
    });
    accountsSuggester.initialize();

    jQuery('input[name=description]').typeahead({ highlight: true }, { source: descriptionsSuggester.ttAdapter() });
    jQuery('input[name=account]').typeahead({ highlight: true }, { source: accountsSuggester.ttAdapter() });
  });
^{extra}

<div .form-group>
  <div .row>
    <div .col-md-3 .col-xs-6 .col-sm-6 :isJust (fvErrors dateView):.has-error>
      <div #dateWrap .form-group.input-group.date>
        ^{fvInput dateView}
        <div .input-group-addon>
          <span .glyphicon .glyphicon-th>
      $maybe err <- fvErrors dateView
        <span .help-block .error-block>#{err}
    <div .col-md-9 .col-xs-6 .col-sm-6 :isJust (fvErrors descView):.has-error>
      <div .form-group>
        ^{fvInput descView}
      $maybe err <- fvErrors descView
        <span .help-block .error-block>#{err}
  <div .row>
    <div .col-md-3 .col-xs-6 .col-sm-6>
    <div .col-md-9 .col-xs-6 .col-sm-6>

<div .account-postings>
  $forall (n, (acc, amt, accE, amtE)) <- displayRows
    <div .form-group .row .account-group>
      <div .col-md-8 .col-xs-8 .col-sm-8 :isJust accE:.has-error>
        <input .account-input.form-control.input-lg.typeahead type=text
          name=account placeholder="Account #{n}" value="#{acc}">
        $maybe err <- accE
          <span .help-block .error-block>_{err}
      <div .col-md-4 .col-xs-4 .col-sm-4 :isJust amtE:.has-error>
        <input .amount-input.form-control.input-lg type=text
          name=amount placeholder="Amount #{n}" value="#{amt}">
        $maybe err <- amtE
          <span .help-block .error-block>_{err}

<div .row>
  <div .col-md-8 .col-xs-8 .col-sm-8>
  <div .col-md-4 .col-xs-4 .col-sm-4>
    <button type=submit .btn .btn-default .btn-lg name=submit>add

$if length journals > 1
  <br>
  <span .input-lg>to:
    <select #journalselect .form-control.input-lg name=journal style="width:auto; display:inline-block;">
      $forall p <- journals
        <option value=#{p}>#{p}
<span .small style="padding-left:2em;">
