时间戳

首页 > 解决方案 > 如何获得与 Materialize.css 框架自动完成的重叠

javascript - 如何获得与 Materialize.css 框架自动完成的重叠

问题描述

因此，在我当前的项目中，U 使用 Materialize.css 中的自动完成功能，我还在下面做了一个简单的示例，这样你就可以看到我的问题。

每当显示自动完成的结果时，下面的东西就会被推下，我想防止这种情况发生，因为它看起来很丑，而且我页面上的输入正好在其他东西之上，我不想那样移动。

将不胜感激任何帮助我如何实现这一目标。

Materialize.css 自动完成文档 

$(document).ready(function() {
  $('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Autocomplete</label>
      </div>
    </div>
  </div>
  <div class="col s12">
    This is my Example Div
    <br> lALLALALALAALA <br> lALLALALA
  </div>
</div>

标签： javascripthtmlcssmaterialize

解决方案

试试这个：

.autocomplete-content {
  position: absolute;
}

推荐阅读