Global Search

In order to create global search form on your website to search for lots follow these steps.

1. Create HTML <form> and <input> tags

Give the form action to be lots' URL of Artisio Webapp (Ex: {path_of_webapp_page}#/lots). Set the method to be GET and set the name of the <input> to be q.

<form action="#/lots" method="GET">
    <input type="text" placeholder="Search for Lots" name="q">
</form>

2. Listen to form submission

Select the form using JavaScript (The most common is to give the form ID and select by ID), listen to it's submission and redirect to /lots URL, but append q query parameter as well.

const searchForm = document.getElementById("searchForm");
const onSearch = (ev) => {
  ev.preventDefault();
  const form = ev.target;
  window.location.href = form.action + "?q=" + form.q.value;
};

if (searchForm) searchForm.addEventListener("submit", onSearch);

Full Example

<form id="searchForm" action="#/lots" method="GET">
    <input type="text" placeholder="Search for Lots" name="q">
</form>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const searchForm = document.getElementById("searchForm");
    const onSearch = (ev) => {
      ev.preventDefault();
      const form = ev.target;
      window.location.href = form.action + "?q=" + form.q.value;
    };

    if (searchForm) searchForm.addEventListener("submit", onSearch);
  })
</script>