<amp-lightbox layout="nodisplay" on="lightboxOpen:searchInput.focus; lightboxClose:searchTriggerOpen.focus" scrollable>
/search/do
{ "result": { "pageCount": 10, "pages": [ { "title": "Some title", "description": "Description", "url": "http://amp.dev/some/link" }, ... ] }, "nextUrl": "/search/do?q=amp&page=2" }
<amp-list>
[src]
<amp-mustache>
<amp-list id="searchList" src="/search/initial-items" [src]="query ? '/search/initial-items : '/search/do?q=' + encodeURIComponent(query)" binding="no" items="." height="80vh" layout="fixed-height" load-more="auto" load-more-bookmark="nextUrl" reset-on-refresh single-item> <template type="amp-mustache"> <div class="search-result-list"> {{#result.pages}} <a href="{{url}}"> <h4>{{title}}</h4> <p>{{description}}</p> </a> {{/result.pages}} </div> </template> </amp-list>
<amp-autocomplete>
/search/autosuggest
filter="substring"
<amp-autocomplete filter="substring" min-characters="1" on="select:AMP.setState({ query: event.value })" submit-on-enter="false" src="/search/autosuggest" > <input placeholder="What are you looking for?"> </amp-autocomplete>
query
<amp-list [src]="'/search/do?q=' + encodeURIComponent(query) + '&locale=en'">
select
amp-autocomplete
on
amp-list
<form action-xhr="/search/echo" on="submit: AMP.setState({ query: queryInput }), searchResult.focus, searchList.changeToLayoutContainer" method="POST" target="_top"> <amp-autocomplete filter="substring" min-characters="1" on="select:AMP.setState({ query: event.value })" submit-on-enter="false" src="/search/autosuggest" > <input id="searchInput" placeholder="What are you looking for?" on="input-throttled:AMP.setState({ queryInput: event.value })" > <button disabled [disabled]="!queryInput">Search</button> </amp-autocomplete> </form>
changeToLayoutContainer
submit
/search/latest-query
amp-state
// search.html <amp-state id="query" src="/search/latest-query"></amp-state> <amp-list src="/search/initial-items" [src]="query ? '/search/initial-items : '/search/do?q=' + encodeURIComponent(query)" ... </amp-list>
// serviceworker.js async function searchDoRequestHandler(url, request) { const searchQuery = decodeURIComponent(url.search.match(/q=([^&]+)/)[1]); const cache = await caches.open(SEARCH_CACHE_NAME); cache.put(SEARCH_LATEST_QUERY_PATH, new Response(`"${searchQuery}"`)); let response = await cache.match(request); if (response) return response; response = await fetch(request); if (response.status == 200) { cache.delete(request, { ignoreSearch: true, }); cache.put(request, response.clone()); } return response; }
// serviceworker.js self.addEventListener('fetch', (event) => { const requestUrl = new URL(event.request.url); if (requestUrl.pathname === '/search/do') { event.respondWith(searchDoRequestHandler(requestUrl, event.request)); } });
<amp-state>