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() });
  });

  const utf8textdecoder = new TextDecoder();
  function decodeBase64EncodedText(b64) {
      const unb64 = window.atob(b64);
      const arr = new Uint8Array(unb64.length);
      for (let i = 0; i < arr.length; i++) {
          arr[i] = unb64.charCodeAt(i);
      }
      return utf8textdecoder.decode(arr);
  }

^{extra}

<div .row>
  <div .col-md-3.col-sm-5.col-xs-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-sm-7.col-xs-6 :isJust (fvErrors descView):.has-error>
    <div .form-group>
      ^{fvInput descView}
    $maybe err <- fvErrors descView
      <span .help-block .error-block>#{err}

<div .account-postings>
  $forall (n, (acc, amt, accE, amtE)) <- displayRows
    <div .form-group .row .account-group style="padding-left:1em;">
      <div .col-sm-9.col-xs-9 :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-sm-3.col-xs-3 :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-sm-9.col-xs-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-sm-3.col-xs-3 style="text-align:right;">
    <button type=submit .btn .btn-default .btn-lg name=submit style="font-weight:bold;">Save