-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
AMP: Building Accelerated Mobile Pages
By :
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="">
We can use CSS to style the input elements...