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

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;添加到“dropdown-content”类。

您不需要更改其他文件。

请参阅以下示例：

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