Pug/Jade：Typeahead.js 打破整个表格 css

Question

我在实施 typeahead.js

时遇到了一些问题

当前设置：

我用的是Bootstrap v.3.3.7
我实现了jQuery3.2
我从 Github

typeahead.bundle.min.js

我将 JS 文件添加到我的项目中并将其链接到
我按照他们的文档here
我添加了（一个空的 CSS）class 命名为 .typeahead 来初始化 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 class 让它初始化 typeahead（还给它一些随机的其他名称，class名称不相关）：

.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 带来了它自己的 classes 像 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结构

Pug/Jade：Typeahead.js 打破整个表格 css

Pug/Jade: Typeahead.js breaks css of entire form

html

twitter-bootstrap

bootstrap-typeahead

typeahead.js

pug

解决方案