具体化：自动完成输入将内容向下移动

Question

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

这是我的代码

<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>

Answer 1

我已经解决了，自动完成动态ul默认设置了静态位置，只需将其设置为绝对值即可解决问题

Answer 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>