选择amp-autocomplete结果时无法跳转至指定URL的问题求助

我之前也碰到过一模一样的问题！你的核心问题是对amp-autocomplete的select事件里的event.value理解有误，咱们一步步来修正：

问题根源 #

你在模板的<div>里写了data-value="{{title}}"和value="{{url}}"，但amp-autocomplete的select事件中，event.value默认只会读取data-value属性的值——也就是你设置的文章标题{{title}}，而不是你想用来跳转的{{url}}。这就导致你实际是在尝试跳转到一串标题文本，自然无法打开目标页面。

修正方案 #

把目标URL存到一个自定义数据属性（比如data-url）里，然后在select事件中通过event.target.getAttribute('data-url')来获取正确的跳转地址：

修改后的完整代码 #

<form class="sample-form" method="post" target="_top">
  <amp-autocomplete filter="token-prefix" filter-value="title" id="autosuggest" min-characters="2" src="//example.com/api/search" [src]="'//example.com/api/search?q=' + (searchQuery || '')">
    <input type="search" name="title" id="search" [value]=searchQuery on="input-debounced:AMP.setState({searchQuery: event.value})">
    <template type="amp-mustache" id="amp-template-custom" >
      <!-- 把url存在data-url属性中，select事件时读取这个属性 -->
      <div data-value="{{title}}" data-url="{{url}}" class="results-items" on="select:AMP.navigateTo(url=event.target.getAttribute('data-url'))">
        <span class="results-item__type">{{type}}</span>
        <span class="results-item__title">{{title}}</span>
      </div>
    </template>
  </amp-autocomplete>
</form>

额外注意事项 #

• 确保你的API返回的url是完整有效的地址（比如包含https://前缀），或者是符合站点规则的相对路径，否则跳转可能会失败。
• 如果你的模板结构有嵌套（比如点击的是<span>而不是外层<div>），可以把event.target换成event.currentTarget，这样能确保获取到外层带data-url属性的元素。

这样修改后，选择自动提示结果时就能正常跳转到对应页面了，和你想要的效果一致！

内容的提问来源于stack exchange，提问作者Scott Carr