<html>
  <head></head>
  <body>
    <form id="search-form">
      <input name="search" />
      <input type="submit" value="Search" />
    </form>

    <table width="100%">
      <thead>
        <tr style="text-align: left;">
          <th width="40%">Title</th>
          <th width="30%">Author</th>
          <th width="10%">Year</th>
          <th width="20%">ID</th>
        </tr>
      </thead>
      <tbody id="search-results"></tbody>
    </table>
  </body>
</html>

<html>
  <head></head>
  <body>
    <form id="search-form" onsubmit="return false">
      <input name="search" />
      <input type="submit" value="Search" onclick="submitSearch()" />
    </form>

    <table width="100%">
      <thead>
        <tr style="text-align: left;">
          <th width="40%">Title</th>
          <th width="30%">Author</th>
          <th width="10%">Year</th>
          <th width="20%">ID</th>
        </tr>
      </thead>
      <tbody id="search-results"></tbody>
    </table>

    <script type="text/javascript"
            src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
      function submitSearch() {
      $.ajax({
      url: "/search",
      method: "POST",
      data: $("#search-form").serialize()
      });

      return false;
      }
    </script>
  </body>
</html>

Add jquery dependency and ajax request when search form used.
Add jquery dependency and ajax request when search form used.
