javascript - 如何创建在显示过滤器时自行扩展的搜索框？

Question

我想创建一个搜索框，在用户输入内容时向下延伸

举个例子

现在我设置了 html，使其在搜索框底部显示所有可能的值

  Search: <input ng-model="query">
  <ul class="my_possible_values">
    <li ng-repeat="possible_value in my_possible_values | filter:query">
      {{possible_value}}
    </li>
  </ul>

但是，列出的元素会将其他 div 元素下推到搜索框下方，而不是覆盖它。

Answer 1

您应该在您的 .my_possible_values 类上放置一个 position: absolute 样式——这就是我过去制作/设计我的搜索框下拉菜单的方式。这将使下拉内容脱离 DOM 的正常流动，从而防止它下推页面上的其他 div。

您可以在此页面上阅读有关 CSS 位置的更多信息 :) http://www.w3schools.com/cssref/pr_class_position.asp

此外，您可能希望将 overflow-y: scroll 和 max-height 样式添加到您的 .my_possible_values 菜单中，如下所示好吧，如果您有很多下拉选项，它就不会溢出页面底部。

我想说这些是创建良好下拉列表的最重要的 CSS 规则。祝你好运!