Pug/Jade：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 e.g.显示结果 - 但这些都不是问题。为什么 typeahead 实际上让我的搜索栏看起来像这样。

Answer 1

发生这种情况是因为与大多数 JS/jQuery 插件一样，typeahead.js 也会修改其工作元素的 DOM 结构。

因此，在 typeahead 初始化后更新的 DOM 将与您在 html 或 jam 中编写的内容不同。您现有的 CSS 规则可能会也可能不会像现在预期的那样适用于这个新的 DOM 结构。

解决方案

您需要更新您的 CSS 规则，以便它们在初始化 typeahead.js 后以更新后的 DOM 为目标。

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