时间戳

首页 > 解决方案 > Prevent Google amp-autocomplete from closing/hiding for debugging purpose

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

问题描述

I have a following code which works just fine, but I was wondering is it possible to prevent amp-autocomplete component from closing when clicking outside of it. It adds display:none every time when i try to inspect element in crhome, and it would be good to keep it open while developing, so I can inspect CSS with more ease.

<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>

标签： amp-html

解决方案

如果只是在 dev-tools 结果容器中找到怎么办，即：

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

并删除 hidden="" ？当然，这不是一个理想的解决方案，但是您可以在 chrome 中使用它来刮擦 css。

一切顺利，V。

推荐阅读