如何在amp-autocomplete无匹配搜索结果时展示自定义提示消息

实现方案 #

amp-autocomplete 原生支持通过带 no-results 属性的模板自定义无搜索结果的提示内容，你只需要在原有组件结构基础上补充对应模板即可，修改后的完整代码如下：

<amp-autocomplete
    filter="none"
    filter-value="name"
    src={`${hostName}/api/areas`}
    on="select:AMP.setState({ defaultState: { area: event.value }}), searchform.submit"
    query="name"
    submit-on-enter="true"
    highlight-user-entry="true"
    items="items"
>
    <input
        dir="rtl"
        autoFocus
        type="search"
        name="selectedArea"
        role="areasearch"
        tabIndex="3"
        className="amp-search-areas-input"
    />

    <!-- 原有匹配结果模板 -->
    <template
        type="amp-mustache"
        dangerouslySetInnerHTML={markup(`
        <div data-value="{{name}}" class="search-dropdown">
             <div>{{ name }}</div>
        </div>`)}
    />

    <!-- 新增无搜索结果提示模板 -->
    <template type="amp-mustache" no-results>
        <div class="no-result-tip">
            未找到匹配的区域内容，你可以尝试调整搜索关键词后重试
        </div>
    </template>
</amp-autocomplete>

注意事项 #

• 请确保你的后端接口在无匹配结果时返回的响应结构和有结果时保持一致，仅 items 字段为空数组即可触发无结果模板渲染
• 无结果模板内可以自由添加自定义内容，比如跳转按钮、操作指引说明等，也可以通过自定义class调整提示的样式
• 如果需要在输入为空的时候不触发无结果提示，可以给amp-autocomplete添加 min-characters 属性设置触发搜索的最小输入字符数

内容的提问来源于stack exchange，提问作者Omar Dulaimi