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

Posted 2021-05-06

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

这是我的代码

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

答案

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

另一答案

您需要进行的唯一更改是在.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>

以上是关于具体化：自动完成输入将内容向下移动的主要内容，如果未能解决你的问题，请参考以下文章

用于根据上标签内容向下移动标签的自动布局约束

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

从零开始配置vim(27)——代码片段

将输入文本框中的文本替换为所选自动完成选项中的文本

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

[AndroidStudio]_[初级]_[配置自动完成的代码片段]