examples

met museum search

html

<form data-s="query">
  <label>Search For Art:
    <input type="search" data-r="query" autocomplete="off" />
  </label>
  <div>hint: try &quot;dragon&quot;</div>
</form>

<div data-r="images"></div>

<script type="text/html" data-template="image">
<div class="piece">
  <a href="__URL__" target="_blank">
    <img src="__IMG_SRC__" alt="__TITLE__" />
    <div>__TITLE__</div>
  </a>
</div>
</script>

javascript

export const b = {};

const searchURL =
  "https://collectionapi.metmuseum.org/public/collection/v1/search?hasImages=true&q=";

const itemURL =
  `https://collectionapi.metmuseum.org/public/collection/v1/objects`;

let data;

export async function images(_, __, el) {
  el.replaceChildren();
  for (let i = 0; i < Math.min(10, data.objectIDs.length); i += 1) {
    const item = await b.getData(`${itemURL}/${data.objectIDs[i]}`);
    if (item && item.primaryImage) {
      const subs = {
        __IMG_SRC__: item.primaryImage,
        __TITLE__: `${item.title} - ${item.medium}`,
        __URL__: item.objectURL,
      };
      el.appendChild(b.render("image", subs));
    }
  }
}

export function searchError(_, __, el) {
  el.innerHTML = "Something went wrong with the search.";
}

export async function query(ev, __, el) {
  ev.preventDefault();
  if (el.value.trim() !== "") {
    b.debounce("dataGetter", "getter", 500, el);
  }
}

export async function getter(payload, __, el) {
  data = await b.getData(`${searchURL}${encodeURI(payload.value)}`);
  if (data === undefined) {
    b.trigger("searchError");
  } else {
    b.shuffle(data.objectIDs);
    b.trigger("images");
  }
}