hledger/hledger-web/templates/add-form.hamlet

<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-9 .col-xs-9 .col-sm-9>
    $if length files > 1
      Add to:
      &nbsp;
      <div style="display:inline-block; width:auto;" .form-group :isJust (fvErrors fileView):.has-error>
        ^{fvInput fileView}
        $maybe err <- fvErrors fileView
          <span .help-block .error-block>#{err}
  <div .col-md-3 .col-xs-3 .col-sm-3 style="text-align:right;">
    <button type=submit .btn .btn-default .btn-lg name=submit style="font-weight:bold;">Add