Neu Advanced Search - Problem mit 2 Form- bzw. Inputfeldern

[Mathias@tn]

Hallo,

das Problem ist wirklich krittisch für mich. Hoffentlich könnt Ihr mir helfen.

Aus gestalterischen Gründen habe ich den Header für Mobile separat vom Header für Desktop gestaltet.
In beiden kommt identisch das Suchfeld vor (nur erste Zeile ist anders. "hidden-xs" usw. für Desktop-Variante:

<div class="suchecss col-xs-7">
    <span id="search">
        <form action="navi.php" method="GET">
            <div class="input-group input-suche">
                <input name="qs" type="text" class="form-control ac_input form-suche" placeholder="Artikel suchen..." autocomplete="off">
                    <span class="input-group-addon such-button">
                        <button type="submit">
                            <span class="fa fa-search"></span>
                        </button>
                    </span>
            </div>
        </form>
    </span>
</div>

Der Mobile Header steht vor dem Desktop Header. Bei Mobile funktioniert die Ajax-Suche, beim Desktop nicht.

Mit Ajax-Suche meine ich die sofort-generierten Suchvorschläge, die nach Eingabe von 3 Buchstaben unter dem Suchfeld aufploppen.

Bei beiden Suchfeldern funktioniert die normale Suche dann schon, aber das Ajax nur mit dem Ersten, also mit dem mobilen.

Hat jemand eine Idee, warum das auf Desktop nicht klappt? Meine Vermutung ist, dass die Suchanfrage auf Desktop die Ajax-Vorschläge beim ersten (mobilen) Suchfeld erzeugt, was leider "hidden-lg etc." ist.

Wie könnte ich das dann wohl klug umgehen? An welches Element werden die Ajax-Suchergebnisse drangehangen?


Für jeden sachdienstliche Hinweis wäre ich mehr als glücklich.

Grüße,
Mathias

 

[Tomas]

Hi Mathias,

die Suchergebnisse werden ganz unten an das div mit den Klassen "jtl_search_results dropdown-menu" gesteckt.
Der Zauber passiert in der suggest.js.

Hast du zufällig einen Link zur Seite? So ohne konkretes Beispiel ist das schwer zu debuggen.

Auf jeden Fall ist es aber nicht ratsam ids doppelt zu vergeben.

Wenn die HTML Struktur die gleiche ist und direkt untereinander steht, kannst du dann dein Layout nicht mit Hilfe von Media Querys realisieren?

LG
Tomas

 

[Mathias@tn]

Danke erstmal für die Antwort.

Es geht um https://www.trendnails.com

Leider lässt es sich mit Media Query nicht machen. Wenn Smarty zuverlässig die Auflösung auslesen könnte (quasi wie Media Query) dann könnte man einen der beiden Code-Blöcke verschwinden lassen bzw. korrekt gesagt erst gar nicht existieren lassen. "Hidden" reicht auf jeden Fall nicht aus. Aber soweit ich das verstehe, gibt es für Smarty keine 100%ige Lösung, vernünftig die Auflösung auszulesen.

Man könnte vielleicht in der suggest.js dafür sorgen, dass man die Ajax-Suche an 2 verschiedene IDs hängt. Dann könnte man unterschiedliche IDs vergeben und je nachdem ist halt eine von beiden IDs hidden und bei der anderen zeigt er es an. Die Performance würde vermutlich etwas leiden, da die Ajax-Suche zweimal generiert/angezeigt wird. Was hällst Du davon?

 

[Tomas]

Hallo Mathias@tn,

Leider lässt es sich mit Media Query nicht machen.

Ich hab mir mal den Quelltext angeschaut und sehe absolut keinen Grund, wieso man das nicht mit Media Querys lösen kann. Was genau übersehe ich da? Du hast doch fast exakt die gleiche DOM Struktur.
In der XS Ansicht hast du links Logo und rechts Suchleiste. Das sollte kein Hexenwerk sein - das ist mir pur CSS im Handumdrehen erledigt.


Spaßeshalber habe ich mir die Seite mal in der Entwicklermodus angeschaut und den Container mit der Suche eingeblendet. Waren nur ein paar CSS Zeilen und schon sah die aus wie die Mobile optimierte.
Aber wie gesagt, vielleicht übersehe ich etwas?

Man könnte vielleicht in der suggest.js dafür sorgen, dass man die Ajax-Suche an 2 verschiedene IDs hängt.

An der suggest.js würde ich nicht rumbasteln. Dadurch machst du dir höchstwahrscheinlich die Updatefähigkeit kaputt.

LG
Tomas