出于调试目的阻止 Google amp-autocomplete 来自 closing/hiding

Question

我有以下代码可以正常工作，但我想知道是否可以防止 amp-autocomplete 组件在单击外部时关闭。每次我尝试检查 crhome 中的元素时，它都会添加 display:none，并且在开发时保持打开状态会很好，这样我可以更轻松地检查 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>

Answer 1

如果只是在开发工具结果容器中查找，即：

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

并删除 hidden="" ?当然，这不是一个理想的解决方案，但你可以在 chrome 中得到这个来抓取 css。

一切顺利，五、

出于调试目的阻止 Google amp-autocomplete 来自 closing/hiding

Prevent Google amp-autocomplete from closing/hiding for debugging purpose

amp-html