Google Apps Script client html

<link rel="stylesheet" href="https://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>

​