Question

我正在使用DevBridge's Autocomplete，它的运行效果很好，但是我不明白为什么建议是在透明背景上显示的。

我在前端方面太糟糕了，所以我不明白为什么像下面的文章那样编辑CSS文件对我不起作用：

jquery autocomplete dropdown is transparent

我的html：

<!-- Own CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom_css.css') }}">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.

<form id="new_order" method="post" action="{{ url_for('summary') }}">
<div class="form-group col-sm" id="fruit">
  <input type="text" class="form-control" name="fruit_name" id="fruit_name">fruit_name<br>
  <button type="submit" class="btn btn-primary" form="new_order" id="new_order_summary">Summarise</button>
</div>
</form>

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- jQuery Autocomplete: https://github.com/devbridge/jQuery-Autocomplete-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.autocomplete.min.js', version=rnd) }}"></script>
<!-- own JS file -->
<script type="text/javascript" src="{{ url_for('static', filename='js/own_js_file.js', version=rnd) }}"></script>

DevBridge网站上描述的我的CSS： https://www.devbridge.com/sourcery/components/jquery-autocomplete/

.ui.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.ui.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }

我在HTML中缺少一些CSS或JS参考吗？我在做什么错了？

Answer 1

您必须添加一些其他样式

.autocomplete-suggestions {
    overflow: auto;
    border: 1px solid #CBD3DD;
    background: #FFF;
}

查看其样式部分以获取更多信息

为什么我的jQuery自动完成背景是透明的？

1 个答案: