Building a product search form

In the previous chapter, we talked about some features that we could add to enhance our e-commerce product page experience. One of these was a product search box. Let's look at this next.

Of course, to search for products in all but the simplest cases will require integration with an inventory system or database. While that aspect is outside the scope of this book, we can put all the other pieces in place.

We'll try to build something similar to Amazon's search box:

 

Amazon's page header with search box shown on a narrow viewport

Let's start with an XHR form like we saw earlier (full code at /ch6/product-search.html):

<form method="post" action-xhr="/ch6/product-search-xhr.php">
  ...
</form>

After that, we'll add a search input text field and a submit button inside the form element:

<input name="keywords" type="search" placeholder="Search" required>
<input type="submit" value="">

Styling the search form

We can use CSS to style the input elements...