防止Google amp自动完成出于调试目的而关闭/隐藏



我有一个下面的代码,它运行得很好,但我想知道是否有可能防止amp-autocomplete组件在点击外部时关闭。它增加了显示:每次我试图检查crhome中的元素时都没有,在开发时保持它的打开状态会很好,所以我可以更容易地检查CSS。

<i role="button" on="tap:autocomplete" class="header__search" tabindex="0"></i>
<amp-lightbox id="autocomplete" layout="nodisplay" class="autocomplete" on="lightboxOpen:autocomplete-query-input.focus">
<form class="sample-form"
method="post"
action-xhr="https://amp.dev/documentation/examples/api/echo"
target="_top">
<amp-autocomplete filter="none" class="autocomplete__component" src="/api/amp/autocomplete" query="query" min-characters="2">
<i class="autocomplete__back" on="tap:quote-lb.close" tabindex="-1" role="button"></i>
<input id="autocomplete-query-input" name="query" class="autocomplete__input">
<template type="amp-mustache" class="autocomplete__result">
<div data-value="{{Label}}" class="autocomplete__result-item">
<a href="/{{Url}}" >
<amp-img layout="fixed" width="27" height="21" src="@GlobalVars.ImageCdnHost{{Image}}?w=27&h=21"></amp-img>
<span>{{Label}}</span>
</a>
</div>
</template>
</amp-autocomplete>
</form>
</amp-lightbox>

如果只是在开发工具结果容器中找到,会怎么样,即:

<div class="i-amphtml-autocomplete-results" role="listbox" id="72_AMP_content_" hidden="">

并删除hidden="隐藏"当然,这不是一个理想的解决方案,但你可以在chrome-to-scratch-css中找到它。

祝你一切顺利,V.

最新更新