帕格/玉：Typeahead.js打破整个表格的CSS

Question

我在实现typeahead.js

时遇到了一些问题

当前设置：

• 我使用Bootstrap v.3.3.7
• 我实现了jQuery 3.2
• 我从Github
下载了typeahead.bundle.min.js v.0.11.1
• 我将JS文件添加到我的项目中并将其链接到
• 我按照文档here
中的说明实现了预先输入的内容
• 我添加了一个名为.typeahead的（空CSS）类来初始化JS的东西

注意：所有预先输入的内容（实时搜索）效果很好，但是预先输入会破坏我的CSS。

-

我的Pug / Jade搜索栏：

.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
    .row
        input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus)
        button.flipkart-navbar-button.col-xs-1
            svg(width='15px' height='15px' fill="white")
                path(d='.....')

结果：

-

代码，当我添加.typeahead类让它初始化为typeahead时（也给它一些随机的其他名称，类名不相关）：

.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
    .row
        input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus).typeahead
        button.flipkart-navbar-button.col-xs-1
            svg(width='15px' height='15px' fill="white")
                path(d='.....')

结果：

-

为什么？我的意思是当然typeahead会带来像tt-hint这样的类，例如显示结果 - 但这些都不是问题。为什么typeahead实际上使我的搜索栏看起来像这样。

Answer 1

这是因为像大多数JS / jQuery插件一样，typeahead.js也修改了它所使用的元素的DOM结构。

因此，初始化typeahead后更新的DOM与您在html或jade中编写的内容不同。您现有的CSS规则现在可能适用于此新DOM结构，也可能不适用。

解决方案

您需要更新CSS规则，以便在初始化typeahead.js后定位更新的DOM。

要查看更新的DOM，您可以使用浏览器的inspect element功能或developer tools等来实时查看DOM结构。