自动完成列表建议

[Don]

你好，

首先非常感谢你设计的新的自动完成功能，我非常喜欢它。

我对我网站上使用的一些内容做了一些小改动。

1. 我在手机上使用了全宽的自动完成列表。我认为这现在是一个安全的选择，因为它可以防止列表超出屏幕。它发生在某个中心位置。它提供了更宽的视野，当用户有更长的名字或有用户状态可用时，这很好。

.d-editor-textarea-wrapper {
  .autocomplete {
    .mobile-view & {
      max-width: calc(100% - 20px);
      width: 100%;
      left: 10px !important; // 覆盖左侧位置计算
    }
  }
}

---

2. 在淡出列表中，即使列表不可滚动，底部阴影和边距也始终可见。我使用阴影作为 :after 伪元素而不是 -webkit-mask。我添加了顶部和底部阴影，它们会滑到第一个和最后一个 li 元素下方。这样我就可以删除底部边距。

.hashtag-autocomplete {
  max-height: 14em;
  &__fadeout {
    -webkit-mask: none;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 1.5em;
      background: linear-gradient(
        to bottom,
        rgba(var(--secondary-rgb), 1),
        rgba(var(--secondary-rgb), 0)
      );
    }
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 1.5em;
      background: linear-gradient(
        to bottom,
        rgba(var(--secondary-rgb), 0),
        rgba(var(--secondary-rgb), 1)
      );
    }
  }
  &__option {
    &:last-of-type {
      margin-bottom: 0;
    }
    // 放在阴影的顶部
    &:first-of-type,
    &:last-of-type {
      .hashtag-autocomplete__link {
        position: relative;
        z-index: 1;
      }
    }
  }
}

[chapoi]

@Don

2. 在淡出列表中，即使列表不可滚动，底部阴影和边距也始终可见。我使用阴影作为 :after 伪元素而不是 -webkit-mask。我添加了顶部和底部阴影，它们会滑到第一个和最后一个 li 元素下方。这样我就可以删除底部边距。

喜欢这个解决方案；将实施。