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

Posted 2023-05-08

【中文标题】为啥我的 jQuery 自动完成背景是透明的？

【英文标题】：Why is my jQuery autocomplete background transparent?为什么我的 jQuery 自动完成背景是透明的？

【发布时间】：2019-04-06 22:12:09

【问题描述】：

我正在使用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 引用？我做错了什么？

【参考方案1】：

你必须添加一些额外的样式

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

查看他们的样式部分了解更多信息

【讨论】：

谢谢@kuru，我看不出你的帖子和我的css文件中已有的有什么区别？

.ui 类未附加。相同的样式，但参考是不同的。你试过了吗？

面部护理！非常感谢！