examples/search.html

<!DOCTYPE html>
<head>
  <title>IA Search</title>
  <meta charset="UTF-8">
  <link href="https://esm.archive.org/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>

<style>
  .tile { max-width: 300px; display: inline-block; vertical-align: top; }
  .tile img { width: 100%; max-width: 100%; height: auto; }
  .tile a { text-decoration: none; }
</style>

<body style="margin: 25px">
  <h1><img src="https://archive.org/images/glogo.png"> Search</h1>

  <div class="card card-body bg-light">
    <center>
      <a id="js-search" class="btn btn-sm btn-primary">Find archive.org items:</a>
      <form>
        <input id="q" class="form-control" type="text" name="q" placeholder="" style="max-width:25%"/>
      </form>
    </center>
  </div>
</body>


<script type="module">
  // can uncomment if want to use jQuery:
  // import $ from 'https://esm.archive.org/jquery'

  import Search from "../lib/search.js"
  import Fields from "../lib/fields.js"
  import * as Query from "../lib/query.js"
  import log from '../util/log.js'

  function search() {
    const q = document.getElementById('q').value.trim()
    
    const any = new Query.QueryString("any", "dragon")
    const media = new Query.QueryMediaType("etree")

    const query = ((q === '') ? new Query.QueryAnd(any, media) : new Query.QueryRaw(q))

    const client = new Search(query, Fields, 1, 500, 10000)

    const tile = (hit) => {
      const e = document.createElement('div')
      e.classList = 'tile card card-body bg-light'
      e.innerHTML = `<a>
        <img/>
        <h3></h3>
        <i>...</i><hr>
        <p></p>
      </a>`
      e.querySelector('a').href = hit.detailsURL;
      e.querySelector('img').src = hit.imageURL;
      e.querySelector('h3').innerText = hit.title;
      e.querySelector('i').innerText = "Date: "+hit.publicdate;
      e.querySelector('p').innerText = hit.description;

      document.body.appendChild(e)
    }

    client.renderCallback((result) => {
      result.forEach((value) => {
        log(value)
        tile(value)
      })
    })
  }

  document.getElementById('js-search').addEventListener('click', search)
</script>