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

[techway]

Hallo Zusammen,

nach ein paar Anregungen ist diese feine Erweiterung mit jQuery Autocomplete entstanden.

Screenshots:

[ Für Gäste sind keine Dateianhänge sichtbar ]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Hier mal ein paar Stichpunkte was damit möglich ist:

- Suche nach Artikel-Nr möglich
- Suche in Produkt-Beschreibung (kurz und lang) möglich
- Suche nach EAN möglich
- Suche nach Kategorien möglich
- Ergebnisse können gruppiert nach Kategorie angezeigt werden
- Anzahl der Ergebnisse kann eingeschränkt werden
- Scrollbalken wird angezeigt sobald max-height aus der css überschritten wird
- Das Fenster mit den Suchergebnissen kann mit der Tastatur oder Maus ausgewählt werden
- Das Fenster mit den Suchergebnissen kann mit ESC oder einen Klick daneben, geschlossen werden
- Nach Auswahl aus der Liste, wird direkt das Produkt bzw. die Kategorie geöffnet
- Funktioniert auch einwandfrei im Internet Explorer
- in der autocomplete.php stehen ganz am Anfang diverse Einstellmöglichkeiten zur Verfügung:

Code: PHP  [Auswählen]

/The settings you can change:
$searchConfig = array(
        'SEARCH_IN_PRODUCTS_NAME' => true,                      // Would you like to search in the product names? Possible values: true / false. Standard: true
        'SEARCH_IN_PRODUCTS_KEYWORDS' => true,          // Would you like to search in the product keywords? Possible values: true / false. Standard: true
        'SEARCH_IN_PRODUCTS_DESCRIPTION' => true,       // Would you like to search in the product description? Possible values: true / false. Standard: true
        'SEARCH_IN_CATEGORY_NAMES' => true,                     // Would you like to search in the category names? Possible values: true / false. Standard: true
        'SEARCH_IN_PRODUCTS_MODEL' => false,            // Would you like to search in the products model? Possible values: true / false. Standard: false
        'SEARCH_IN_PRODUCTS_EAN' => false,                      // Would you like to search in the products ean? Possible values: true / false. Standard: false
        'SUBSTRING_COUNT' => 40,                                        // Length of results in the list (signs). Possible values: INT from 1 to 256. Standard: 15
        'SUBSTRING_FINALIZER' => ' ...',                        // Signs after a word is cutted in the suggestlist. Possible values: Any String. Standard: '...'
        'PRODUCT_RESULT_COUNT' => 10,                           // How many found products should be displayed? Possible values: INT from 1 to 256. Standard: 5
        'CATEGORY_RESULT_COUNT' => 5,                           // How many found categories should be displayed? Possible values: INT from 1 to 256. Standard: 5
        'SHOW_CATEGORY_WITH_PRODUCT' => false,          // Would you like to show the category name in the product result like "category => productname" Possible values: true / false. Standard: false
        'GROUP_RESULTS' => true                                         // Would you like to group the results by the category_name? Possible values: true / false. Standard: true
        );

//Settings END

Weiterer Vorteil von diesem Modul ist, dass jQuery verwendet wird da diese bereits bei modified eCommerce Shopsoftware Standard ist und keine weitere Ajax Skripte notwendig sind.

Folgende Punkte würde ich mir noch vorstellen diese dort einzubinden:
- Suche nach mehreren Keywords durch eine UND-Verknüpfung

Update (Version mit Soundex - fehlertoleranter Suche):

[...]
Du musst in der autocomplete.php
in der Zeile 20 ('SOUNDEX_SEARCH' => false) auf true setzen dann ist es scharf geschaltet (Installationsanleitung beachten! SQL-Befehl absetzen nicht vergessen)
[...]

Screenshot der fehlertoleranten Suche:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Update (Version 2011-03-24):

[...]
Änderungen:
- Bug bei Shopstat im IE behoben (Danke an web28)
- Bug beim eingeschalteten DB-Cache behoben
- Verlinkte Artikel können gefiltert werden (werden nur einmal angezeigt, siehe Einstellung "FILTER_LINKED_PRODUCTS")
- Artikelbilder werden in der Ergebnisliste mit angezeigt (thumbnails) (Danke an pfeffersack)
[...]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Update (Version 2011-04-19):

[...]
Änderungen:
- Javascript ausgelagert in eigene js-Datei
- Links werden nun mit xtc_href_link im php-skript generiert und sollten nun immer funktionieren
- Kategorienamen können mit Soundex/Koelner durchsucht werden
- Product_short_description kann in der Liste angezeigt werden (siehe Screenshot)
- Drehender Kreis (animiert) wird bei Skript-Aktivität (während der Suche) angezeigt
[...]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Update (Version 2011-04-22):

[...]
Änderungen:
- noimage.gif wird bei fehlendem products_image angezeigt
- products_short_description wird nun von HTML-Code bereinigt bevor dieses übergeben wird
- Preis kann ebenfalls angezeigt werden.
[...]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Update (Version 2011-04-22_2):

[...]
Folgende Änderungen:
In der PHP:
- Wiederholte Blöcke als Funktionen ausgelagert
- SQL-Abfragen optimiert (sollte nun etwas schneller sein)
- Produkt-Beschreibung und Bilder werden in der PHP bei den Settings eingestellt

In der JS:
- Abfragen auf leeren oder undefined Inhalt
- Position der Liste falls Fenster (Auflösung) zu klein (wird geflippt)
[...]

Update (Version 2011-04-22_3):

[...]
Fehler beseitigt und die <hr>-Geschichte ist nun auch endlich draußen.
[...]

Update (Version 2011-05-30):

Anbei das aktualisierte Modul gemäß den Änderungen von web28 und ThYpHoOn bzgl. Kundengruppen.

Update (Version 2013-09-11):

Ich habe im Modul einen Fehler bei aktiviertem Kundengruppencheck korrigiert.

In der "/autocomplete.php" muss im folgenden Block:

Code: PHP  [Auswählen]

  //BOF - web28 - 2011-04-22 - NEW SQL QUERY and change $where_str to %s
  $sql_str_cat = "SELECT cd.categories_id,
                         cd.categories_name
                    FROM ".TABLE_CATEGORIES." c
              INNER JOIN ".TABLE_CATEGORIES_DESCRIPTION." cd
                      ON c.categories_id = cd.categories_id
                   WHERE cd.language_id = '".(int)$languages_id."'
                   ".$group_check."
                     AND c.categories_status = '1'
                         %s
                ORDER BY cd.categories_name
                   LIMIT 0,".$searchConfig['CATEGORY_RESULT_COUNT'];
  //EOF - web28 - 2011-04-22 - NEW SQL QUERY and change $where_str to %s

"$group_check_c" verwendet werden.

Also so:

Code: PHP  [Auswählen]

  //BOF - web28 - 2011-04-22 - NEW SQL QUERY and change $where_str to %s
  $sql_str_cat = "SELECT cd.categories_id,
                         cd.categories_name
                    FROM ".TABLE_CATEGORIES." c
              INNER JOIN ".TABLE_CATEGORIES_DESCRIPTION." cd
                      ON c.categories_id = cd.categories_id
                   WHERE cd.language_id = '".(int)$languages_id."'
                   ".$group_check_c."
                     AND c.categories_status = '1'
                         %s
                ORDER BY cd.categories_name
                   LIMIT 0,".$searchConfig['CATEGORY_RESULT_COUNT'];
  //EOF - web28 - 2011-04-22 - NEW SQL QUERY and change $where_str to %s

[...]

Fix-Datei für UTF-8:
Datei "utf8_autocomplete.php.zip" benutzen.

Fix Datei für neuere jQuery-Versionen:
Wer Probleme hat, weil er eine zu neue jQuery-Version einsetzt, der verwendet bitte Datei "jquery-searchbox.zip".

[EDIT Tomcraft 08.02.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 09.02.2011: Modul aktualisiert und Version mit Soundex (fehlertolarante Suche) angehängt, Danke an techway.]
[EDIT Tomcraft 10.02.2011: Modul aktualisiert, Danke an h-h-h.]
[EDIT Tomcraft 10.02.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 27.02.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 24.03.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 19.04.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 21.04.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 22.04.2011: Modul aktualisiert, Danke an techway.]
[EDIT Web28 22.04.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 23.04.2011: Modul aktualisiert, Danke an techway.]
[EDIT Tomcraft 30.05.2011: Modul aktualisiert, Danke an Speedy, web28 und ThYpHoOn.]
[EDIT Tomcraft 11.09.2013: Fehler in Modul korrigiert.]
[EDIT Tomcraft 27.11.2015: Fix-Datei für UTF-8 ergänzt.]
[EDIT Tomcraft 27.11.2015: Fix-Datei für neuere jQuery-Versionen ergänzt.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=11154.0

[speedy]

wow



Das Modul ist ca. 100 KB kompakter als IntelliSearch.

Was mir nicht gefällt ist die Einbauanleitung als PDF, da die Zeilenumbrüche nicht mehr passen und dadurch Fehler entstehen können.
Die autocomplete.php würde ich ins Template verlagern.

Kannst du bitte deine geänderten Dateien hochladen, habe es noch nicht zum laufen gebracht. Die Liste mit den Ergebnissen erscheint nicht.

Fuzzy wäre natürlich noch klasse.

[Tomcraft]

Hallo Steffen,

super Sache, vielen Dank!

P.S.: Cooles Avatar-Bildchen.

Grüße

Torsten

[h-h-h]

Super Modul  

Die autocomplete.php finde ich im Shoproot gut aufgehoben.

Gruß

h-h-h

[speedy]

Es sind alle Änderungen (bis auf Language) im Template, daher hätte ich das so gemacht wie beim IntelliSearch Modul und alles ins Template verlagert.
Ich persönlich mag es nicht, wenn Module im Shop-Root liegen, ob nun als Datei oder als Verzeichnis.
Man muss auch immer zur Sicherheit die robots.txt erweitern, damit nicht ggf. irgendein Käse indiziert wird.

[techway]

Hallo,

nächstes mal mache ich die Anleitung wieder in HTML

Ich habe an der autocomplete.php weitergemacht:

- Mehrere Keywords möglich, diese werden mit UND verknüpft.
- Category_description kann durchsucht werden

Wir brauchen noch einen Tester der das ganze mit einer großen Datenbank testen kann!

neue autocomplete.php => siehe paar Beiträge weiter

[techway]

Warum hören eigentlich die Zeilennummern mittendrin auf?  

[cYbercOsmOnauT]

Anscheinend ein Bug vom SyntaxHighlighter JS.

Zu Deinem Skript habe ich ja schon in PNs was gesagt. Aber auch gerne einmal öffentlich:



Ach ne Mist.. falsches Emoticon...



Bisschen Spaß muss sein.

Grüße,
Tekin

[Tomcraft]

Warum hören eigentlich die Zeilennummern mittendrin auf?  

Ignoriere das mit den Zeilennummern einfach, habe keine Lust mich hier gegen Ende des bbPress Forums noch mit solchen Fehlern zu plagen, bevor wir dann auf das neue Forum migrieren.

Am besten wäre es, wenn du jedes Mal einfach ein neues Komplett-Paket anhängen würdest, denke ich.

Grüße

Torsten

[techway]

Ja gern geschehen
dann nochmal neue Version

nun mit:
- FSK check
- Group-check

es hat sich nur die autocomplete.php geändert!

[EDIT Tomcraft 08.02.2011: Modul in Beitrag 1 aktualisiert.]

[DokuMan]

Weiterer Vorteil von diesem Modul ist, dass jQuery verwendet wird da diese bereits bei modified eCommerce Shopsoftware Standard ist und keine weitere Ajax Skripte notwendig sind.

Dann kann dieses Modul endlich das alte "Fuzzy Search Modul" ablösen!
Sehr gut!  

[AllyG]

Eine Frage hätte ich da noch.

Bei mir funktioniert das Modul zwar super. Danke an dieser Stelle.

Aber wenn es mir in der Suche Artikel anzeigt, steht darüber fett gedruckt: "NULL"

Hat bestimmt damit zu tun, dass ich da in der "german.php" einen Eintrag machen muss, aber wie soll der aussehen?

[techway]

das einzige, was in der Sprachdatei definiert ist:

Code: PHP  [Auswählen]

define('TEXT_AUTOCOMPLETE_CATEGORIES', 'Kategorien');
 

Dieser Text wird über den Ergebnissen von der Kategoriesuche angezeigt. (fett gedruckt)

In der englischen Sprache (falls du es im Shop verwendest) musst du es natürlich auch dementsprechend nachziehen!

Bei den Artikeln wird dementsprechende Kategorie darüber fett angezeigt.

[speedy]

Ich habe auch öfters "null" in der Liste stehen.

Wo es noch ein Problem gibt ist mit HTML-Codierung wie &amp
das steht dann auch so in den Ergebnissen

Und das "...." steht öfters in der zweiten Zeile, mal sehn wo das gesteuert wird - auch ab wieviel Zeichen gekürzt wird.

[cYbercOsmOnauT]

"null" ist im JS der Wert, wenn nichts zurück kommt. Das kann man relativ simpel vor der Ausgabe abfangen.
Die HTML-Codierungen müsste man zurückwandeln und stellenweise escapen. (Anführungsstriche)