实现：自动完成输入将内容向下移动答案

【问题标题】：materialize: autocomplete input moves content down实现：自动完成输入将内容向下移动
【发布时间】：2018-08-25 16:05:10
【问题描述】：

我正在使用 materialize 的自动完成输入，但我注意到当我进行搜索时内容被向下移动，我尝试使用位置绝对属性但它不起作用，它只是使内容输入输入，我该怎么办？

这是我的代码

<div class="input-field col s12 m4 l4 xl4">
      <input type="text" id="servicios" name="servicios" class="autocomplete">
      <label for="servicios-input">Servicios</label>
       </div>
       <div class="input-field col s12 m2 l2 xl2">
           <button class=" btn_edit_continue waves-effect waves-light btn" type="button" name="action" id="agregarServicio">Agregar</button>
       </div>

【问题讨论】：

标签： jquery css input autocomplete materialize

【解决方案1】：

我已经解决了，自动补全动态ul默认设置了一个静态位置，设置为absolute就可以解决问题

【讨论】：

【解决方案2】：

您需要做的唯一更改是在您的 .css 文件中，您必须将属性 position: absolute !important; 添加到“下拉内容”类中。

您不需要更改其他文件。

请看下面的例子：

$(document).ready(function() {
  $('#input').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "www.victorhnogueira.com.br": null,
      "Google": 'https://placehold.it/250x250'
    },
    limit: 10, // 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.
  });
});

/*THIS IS WHAT YOU NEED TO ADD TO YOUR CODE*/

.dropdown-content {
  position: absolute !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="input-field col s12">
  <input type="text" id="input" class="autocomplete" />
  <label for="inputDeBuscaDeProduto">search</label>
</div>
<div class="red">div bellow</div>

【讨论】：