index.html

<!--
title: Sharp App
-->

<div class="container">
  <div class="row">
    <div class="col col-2">
      <i class="svg-home svg-9x"></i>
    </div>
    <div class="col pt-4">
      <div class="row">
        <div class="col">
          <p class="lead">
            Complete with page layout, menu partial and responsive navigation!
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <ul class="list-unstyled">
            <li>Bootstrap v4.3.1</li>
            <li>jQuery v3.4.1</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container ml-5 mt-5">
  <div class="form-group row">
    <label for="host" class="col-sm-1 col-form-label">Name</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="Name" name="Name" placeholder="" value="" autocomplete="off">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label"></label>
    <div class="col-sm-4">
      <h4 id="result"></h4>
    </div>
  </div>
</div>

{{#raw appendTo scripts}}
<script>
  $('#Name').keyup(function () {
    var name = $('#Name').val();
    if (name) {
      $.getJSON('/hello', { name }, function (r) {
        $('#result').html(r.result);
      });
    } else {
      $('#result').html('');
    }
  });
</script>
{{/raw}}