MODUL: jQuery Autocomplete (ähnlich Ajax Search Suggest, IntelliSearch)

[manne35]

Gratuliere  
, ... ich muss es bei mir auch nochmal probieren, da ich die Kategorien unbedingt in der Suche benötige... wenn Du das schaffst werd ich das doch auch wieder hinkriegen...   

[karsta.de]

@Herr_Bert

Sieht jetzt eigentlich alles korrekt aus. Um es an die richtige Position zu bekommen, muss du nur noch am Style in der css-Datei schrauben. Außerdem würde ich das Ganze bis max. 350px auf display:none schalten, da das den Kunden auf dem Telefon erschlägt. Musst du selbst mal testen.

@manne35
In der V2 gibt es schon eine mitgelieferte Autocompletesuche und dazu diverse Einträge in der general_bottom.js.php, die müssen dann entfernt bzw. geändert werden.

BG kgd

[Herr_Bert]

Dankeschön Karsta 
das mit dem "css schrauben" ist gar nicht so einfach  ich habe in den 43 Seiten einiges gefunden, aber so richtig haut da nichts von hin 
Ich nehme mal an dass dieser, allerdings auskommentierte Bereich die richtige Stelle ist:

Code: CSS  [Auswählen]

 .ui-autocomplete {
 /*max-height: 400px;*/
 /*overflow-y: auto;*/
 /* prevent horizontal scrollbar */
 /*overflow-x: hidden;*/
 /* add padding to account for vertical scrollbar */
 /*padding-right: 20px;*/

Wie kann ich da die richtigen Einstellungen vornehmen?

[Herr_Bert]

Uff, ich finde die richtige Stelle/n nicht, wo verdammt kann ich die Werte für "Element" Inline ändern?
[ Für Gäste sind keine Dateianhänge sichtbar ]

Bisher habe ich nur die Farbe ändern können, von:

Code: CSS  [Auswählen]

.ui-widget-content { background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }

auf:

Code: CSS  [Auswählen]

.ui-widget-content { background: #e2f9ef; color: #222222; }

[Herr_Bert]

Bastel, werkel, gib alles  so langsam beiße ich mich durch 
Alle Änderungen die ich in diesem Teil:

Code: CSS  [Auswählen]

.ui-autocomplete {
 /*max-height: 400px;*/
 /*overflow-y: auto;*/
 /* prevent horizontal scrollbar */
 /*overflow-x: hidden;*/
 /* add padding to account for vertical scrollbar */
 /*padding-right: 20px;*/
 z-index: 999 !important;
 position: absolute;
 cursor: default; }

der jquery-ui.css ausprobiert habe brachten nicht den gewünschten Erfolg. Außer z-index: 999 !important;, damit konnte ich die Box vor den Slider bringen.

Um die Box zu verschieben habe ich in diesem Teil:

Code: CSS  [Auswählen]

.ui-menu {
 list-style:none;
 padding: 1px;
 margin-left: 180px;
 margin-top: 465px;
 display:block;
 float: left;
 }

margin-left und margin-top eingefügt.

Um die Hintergrundfarbe anzupassen habe ich unter /* Component containers diese Zeile:

Code: CSS  [Auswählen]

.ui-widget-content { background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }

abgeändert in:

Code: CSS  [Auswählen]

.ui-widget-content { background: #efefef; color: #222222; }

Hänge mal die Datei mit an.

Auf dem Smartphone passt das jetzt nicht gerade optimal 
Ist das eigentlich alles so richtig was ich hier mache?
Kann das besser gelöst werden?
Wie kann ich die Box für's Smartphone anpassen?

[hpzeller]

Hallo Herr_Bert,

um das Problem mit der Positionierung zu beheben kannst du mal folgendes versuchen.

In templates\xtc5\javascript\jquery-searchbox.js ca. Zeile 51 nach folgender Codezeile

Code: Javascript  [Auswählen]

    $("#searchbox").catcomplete({
 

diese Codezeile einfügen,

Code: Javascript  [Auswählen]

        appendTo: ".search_box_input",
 

dann in templates\xtc5\css\classes.css ca. Zeile 465 folgenden Regelsatz

Code: CSS  [Auswählen]

.search_box_input {
        float: left;
        width: 70%;

}
 

mit diesem ersetzen.

Code: CSS  [Auswählen]

.search_box_input {
        float: left;
        width: 70%;
        position:relative;
 

}

Die eingefügten Eigenschaften margin-left und margin-top musst du wieder entfernen, oder allenfalls anpassen, weil sich nun die Box nicht mehr am Body-Tag sondern am Sucheingabefeld orientiert.

Gruss
Hanspeter

[Herr_Bert]

Guten Morgen Hanspeter  vielen Dank, das funktioniert schon fast perfekt 
Die Box muss noch etwas tiefer damit das Eingabefeld nicht verdeckt wird. Kann ich in der templates\xtc5\css\classes.css einfach noch margin-top: einfügen, oder wird das auch wieder woanders geregelt 

[hpzeller]

Hallo Herr_Bert,

versuche mal folgendes.
Suche in templates\xtc5\javascript\jquery-searchbox.js ca. Zeile 61 nach folgender Codesequenz

Code: XML  [Auswählen]

                //Näheres zu Position siehe: http://docs.jquery.com/UI/Position
                position: {
                        my: "left top",
                        at: "left bottom",
                        collision: "flip horizontal"
 

und ersetze sie mit dieser.

Code: XML  [Auswählen]

                //Näheres zu Position siehe: http://docs.jquery.com/UI/Position
                position: {
                        my: "left top+10",
                        at: "left bottom",
                        collision: "flip horizontal"
 

Den Wert 10 hier -> my: "left top+10", musst du ev. noch anpassen.

Näheres zu Position findest du hier -> http://api.jqueryui.com/position/

Gruss
Hanspeter

[Herr_Bert]

Habe ich probiert, auch mit +50, aber die Box verschiebt sich nicht 
In Beitrag #422 (S.29) steht:

Falls jemand den Ergebnisbox verschieben möchte kann es an der Datei "jquery-searchbox.js" einfügen.
Dieses Teil finden

Code: Javascript  [Auswählen]

position:{my:

Dahinter ist bereits angegeben wo der Box erscheinen soll. "left top", "right bottom" usw.. Falls jemand es noch ein paar Pixel herumschieben möchte braucht den "offset:" Befehl.

z.B.

Code: Javascript  [Auswählen]

offset: "2px 0 0 0"

Am Ende sieht meines so aus

Code: Javascript  [Auswählen]

position:{my:"right top",at:"right bottom",offset: "2px 0 0 0", collision:"flip horizontal"}

Aber auch diese Änderung "erschüttert" die Box nicht, die bleibt da stehen wo sie ist 

[karsta.de]

Wenn man die aktuelle jquery-ui.min.js und jquery-ui.min.css (http://jqueryui.com/) verwendet, braucht man an der jquery-searchbox.js nichts zu ändern und die Liste wird an die korrekte Position gesetzt. Allerdings müssen dann die Styles für die Anzeige der Kategorien und Artikel in der Such-Auflistung neu designed werden.

BG kgd

[Herr_Bert]

Allerdings müssen dann die Styles für die Anzeige der Kategorien und Artikel in der Such-Auflistung neu designed werden.

na, da sollte ich ja gar keine Probleme mit haben 

Ich kann mich daran erinnern dass bei Verwendung der dem Modul beiliegenden jquery-ui.js keine Vorschaubilder mehr angezeigt wurden und ich deshalb meine vorhandene jquery-ui.js so:

Allerdings ist in der jquery-ui.js noch ein Teil, der sicher in deiner Datei fehlt: "jQuery UI Autocomplete 1.8.9", den mußt du noch in deine Datei mit reinkopieren.

angepasst habe.

[hpzeller]

Hallo Herr_Bert,

versuch mal noch folgendes.

Code: XML  [Auswählen]

                //Näheres zu Position siehe: http://docs.jquery.com/UI/Position
                position: {
                        my: "left top+10",
                        at: "left top+10",
                        collision: "flip"
 

Wenn es nicht klappt fügst du so wie du es selbst in Antwort #666 vorgeschlagen hast im Stylesheet margin-top: 10px; ein.

Gruss
Hanspeter

[Herr_Bert]

Bei dem ersten Vorschlag ändert sich nichts, bei dem zweiten Vorschlag wird nur das Eingabefeld höher 

[hpzeller]

Ja, aber jetzt hast du margin-top: 10px; in den Regelsatz .search_box_input eingefügt, du muss das aber in der Datei jquery-ui.cs im Regelsatz .ui-menu einfügen.

[EDIIT]
Gib margin-top: 40px; statt margin-top: 10px; ein.

Gruss
Hanspeter

[Herr_Bert]

Oh weia  sofort geändert, sieht jetzt so aus:

Code: CSS  [Auswählen]

 .ui-menu {
 list-style:none;
 padding: 1px;
 margin-top: 40px;
 display:block;
 float: left;
 }

und siehe da, die Box bewegt sich doch   
Jetzt fehlt nur noch ein wenig Feinschliff für's Smartphone, da ist die Box noch sehr groß  gibt es da so etwas wie einen Kompromiss um beide Anzeigen abzudecken?