Google Apps Script client html

index.html

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">

<form class="form-search">
  <div>
    <input name="query" type="text" class="input-medium search-query">
    <input type="button" value="Search" class="btn"
      onclick="google.script.run.withSuccessHandler(showBooks).search(this.form)" />
  </div>

  <table id="books">
  </table>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
function showBooks(books) {
  var html = '';
  
  books.map(function(book) {
    html += '<tr>';
    html += '<td><img src="' + book.image + '"></td>';
    html += '<td><a href="' + book.link + '">' + book.title + '</a></td>';
    html += '<td><a href="#" class="addLink" book="' + book.id + '">Add Book</a>';
    html += '</tr>';
  });

  $('#books').html(html).slideDown();
  
  $('#books .addLink').click(function(event) {
    event.preventDefault();
    alert('Something happened!');
  });
}
</script>