Jquery UI 自动完成在基于 Twitter Bootstrap 的网站上显示效果不佳答案

【问题标题】：Jquery UI autocomplete not displaying well on Twitter Bootstrap based websiteJquery UI 自动完成在基于 Twitter Bootstrap 的网站上显示效果不佳
【发布时间】：2015-09-28 02:42:38
【问题描述】：

所以我使用 Bootstrap 3、JQuery 和 Jquery-UI 自动完成。所以在我的项目上，结果是这样的，

但根据文档页面，它应该是这样的

鼠标悬停的可点击项目和一切。我的搜索框HTML如下：

<form role="search" class="navbar-form navbar-left">
            <div class="form-group">
                <input id="titles" type="text" placeholder="Search" class="form-control">
            </div>
            <button type="submit" class="btn btn-default">GO</button>
        </form>

jquery-ui 自动完成小部件的文档页面是here

任何指针？提前致谢。 PS：照片是一个土豆拍的:-)

【问题讨论】：

Bootstrap 3 正在替换默认样式。试试这个gist.github.com/daz/2168334
试过了，但并没有完全解决问题
你有没有把它放在一个可以公开访问的地方，以便我们检查它？
@SethMcClaine，我已经回答过了。谢谢

标签： javascript jquery twitter-bootstrap jquery-ui autocomplete

【解决方案1】：

@dmlittle 给了我这个想法

您还需要以 Boostrap 方式设置自动完成小部件的样式

.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 }
  .ui-autocomplete > li {
padding: 3px 20px;
     }
   .ui-autocomplete > li.ui-state-focus {
  background-color: #DDD;
    }
 .ui-helper-hidden-accessible {
  display: none;
 }

【讨论】：