I am trying to build an autocomplete input which is triggered upon clicking on a product. The input is to allow the user to select a city so that he can be landed on to the product details page with the city context.
To achieve this I store the product url in amp-state upon clicking on a product from a list of products, then when the user selects a city I want to navigate the user to product url with cityId as a query parameter. I am using amp-list with amp-mustache for autocomplete.
The code:
<form action="//localhost/search/" id="citysuggest-form" on="submit:autosuggest-list.hide" target="_top" novalidate="" hidden>
<input autocomplete="off" i name="bysearch" on="input-debounced:AMP.setState({city_autosuggest: {autosuggest: event.value}}),autosuggest-list.show" placeholder="Search city..." required="" value="" type="text" [value]="autosuggest|| ''" class="search__form" autofocus>
<span class="close" on="tap:autosuggest-list.hide,city__search.hide" role="button" tabindex="0">×</span>
</form>
<amp-selector layout="container" on="select:AMP.navigateTo(url='//localhost'+(selectProductUrl || '')+'?cityId='+event.targetOption)">
<amp-list [src]="'//localhost/api/v2/autocomplete-amp/city/?record=5&term=' + (city_autosuggest.autosuggest || '')" height="110" hidden="" id="autosuggest-list" layout="responsive" src="//localhost/api/v2/autocomplete-amp/city/?record=5&term=" width="200" class="search__result-list">
<template type="amp-mustache">
<div class="search__result" option='{{payload.cityId}}' role="option" tabindex="0">{{result}}</div>
</template>
</amp-list>
</amp-selector>
But the above throws error as the url= is not getting evaluated. Is there a way to do so ?
