Mops/Jade: Typeahead.js bricht css ganzer Form

Question

ich einige Probleme bekam Umsetzung typeahead.js

Aktuelle Einstellung:

• Ich benutze Bootstrap v.3.3.7
• I umgesetzt jQuery
3.2
• ich habe die typeahead.bundle.min.js v.0.11.1 von Github
• ich die JS-Datei in meinem Projekt hinzugefügt und verknüpft es auf dem
• implementiert ich die typeahead Sachen wie in ihrer docs beschrieben here
• I (eine leere CSS) Klasse .typeahead Namen hinzugefügt JS Sachen

HINWEIS init: Alle typeahead stuff (Live-Suche) funktioniert gut, aber typehead zerstört mein css.

-

Mein Arbeits Mops/Jade searchbar:

.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='.....') 

Ergebnis:

-

Der Code, wenn ich hinzufügen, die .typeahead Klasse lass es init typeahead (gab auch einige zufällige andere nam es ist der Klassenname nicht relevant):

.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='.....') 

Ergebnisse in:

-

Warum ist das so? Ich meine natürlich, dass typeahead seine eigenen Klassen wie tt-hint z.B. um die Ergebnisse anzuzeigen - aber das sind keine Probleme. Warum sieht typeahead meine Suchleiste so aus?

Answer 1

Dies geschieht, weil typeahead.js wie die meisten JS/jQuery-Plugins auch die DOM-Struktur der Elemente ändert, an denen es arbeitet.

Also, das aktualisierte DOM nach der Initialisierung von typeahead wäre nicht das gleiche wie das, was Sie in Ihrem HTML oder Jade geschrieben haben. Ihre bestehenden CSS-Regeln können nun wie beabsichtigt für diese neue DOM-Struktur gelten oder auch nicht.

Lösung

Sie benötigen eine CSS-Regeln zu aktualisieren, so dass sie gezielt die aktualisierte DOM nach der Initialisierung von typeahead.js.

Um das aktualisierte DOM anzuzeigen, können Sie inspect element Funktion von Browsern oder developer tools etc verwenden, um die DOM-Struktur in Echtzeit anzuzeigen.