I am trying to get the amp-autocomplete to go directly to a url that it gets from the json list when clicked on. The href is included in the result but when clicking on the result it just adds it to the input box and doesn't direct.
I tried on="tap:AMP.navigateTo(url='{{url}}')" which didn't seem to do anything. Not sure if it is possible to do this with amp?
<form class="sample-form" method="post" target="_top" action-xhr="https://amp.dev/documentation/examples/api/echo">
<label>
<span>Search for</span>
<amp-autocomplete filter="token-prefix" filter-value="h1" min-characters="2">
<input type="search" name="h1">
<script type="application/json">
{
"items":[
{
"h1":"page1",
"url":"page-1-url"
},{
"h1":"page2",
"url":"page-2-url"
},
{
"h1":"page3",
"url":"page-3-url"
}
]
}
</script>
<template type="amp-mustache" id="amp-template-custom">
<div class="slug-item" data-value="{{h1}}">
<a href="{{url}}" on="tap:AMP.navigateTo(url='{{url}}')">{{h1}}</a>
</div>
</template>
</amp-autocomplete>
</label>
</form>
Interesting question.
At first, I tried to solve the problem using CSS, for example, setting a high z-index for the link, but it didn't work.
In the end, I took the option with the on="select" event from amp-autocomplete. I hope that this option will suit you:
<!--
This is the minimum valid AMP HTML document. Type away
here and the AMP Validator will re-check your document on the fly.
-->
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8" />
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1" />
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
</head>
<body>
<form class="sample-form" method="post" target="_top" action-xhr="https://amp.dev/documentation/examples/api/echo">
<label>
<span>Search for</span>
<amp-autocomplete filter="token-prefix" filter-value="h1" min-characters="2" on="select:AMP.navigateTo(url=event.value)">
<input type="search" name="h1" />
<script type="application/json">
{
"items": [
{
"h1": "page1",
"url": "https://stackoverflow.com/"
},
{
"h1": "page2",
"url": "https://google.com/"
},
{
"h1": "page3",
"url": "https://amp.dev/"
}
]
}
</script>
<template type="amp-mustache" id="amp-template-custom">
<div class="slug-item" data-value="{{url}}">
<span class="autocomplete-link">{{h1}}</span>
</div>
</template>
</amp-autocomplete>
</label>
</form>
</body>
</html>Codepen: https://codepen.io/alexandr-kazakov/pen/rNeVoVo
I have tested it in mobile and on computers, it works well.