====== Autocompleterfunktion zur Suche hinzufügen ======

Keine Website kann so strukturiert sein, dass jedem Nutzer sofort klar ist, wo sich die gewünschte Information befindet. Deshalb gehört ein Suchfeld zu einer komplexeren Seite dazu. Die benutzbarkeit der Suche verbessert sich wesentlich, wenn der Nutzer schon während der Eingabe seines Suchwortes Vorschläge erhält, die er übernehmen kann. Das prominenteste Beispiel dafür ist Google.

==== Vorbereitung ====

Sie benötigen die Javascriptbibliotheken [[http://www.prototypejs.org/ |prototype.js]] und [[http://script.aculo.us/ | scriptaculous.js]] **oder**  [[http://protoculous.wikeo.be/|protoculous]], welches die gepackte Variante von beiden darstellt. Diese werden in das Unterverzeichnis ''cms/js'' kopiert. Achten Sie darauf, das auch sich effects.js und controls.js mit im Verzeichnis befinden. Natürlich muss ein Suchfeld in der Seite eingebunden sein. Das kann hardcodiert, direkt im Layout sein oder über das entsprechende Modul. Das input-Feld, welches den Autocompletertext erhalten soll, muss die ''**id='suche'** '' enthalten. 
Zusätzlich werden noch die beiden folgenden dateien benötigt:

**search.js**
<code js>
Ajax.CachedAutocompleter = Class.create();
    Object.extend(Object.extend(Ajax.CachedAutocompleter.prototype, Autocompleter.Base.prototype), {
      initialize: function(element, update, url, options) {
        this.baseInitialize(element, update, options);
        this.options.asynchronous  = true;
        this.options.onComplete    = this.onComplete.bind(this);
        this.options.defaultParams = this.options.parameters || null;
        this.url                   = url;
        this.cache                 = {};
      },
   
      getUpdatedChoices: function() {
        var t = this.getToken();
        if(this.cache[t]) {
            this.updateChoices(this.cache[t]);
        } else {
            entry = encodeURIComponent(this.options.paramName) + '=' + 
              encodeURIComponent(t);
  
            this.options.parameters = this.options.callback ?
              this.options.callback(this.element, entry) : entry;
  
            if(this.options.defaultParams) 
              this.options.parameters += '&' + this.options.defaultParams;
  
            new Ajax.Request(this.url, this.options);
        }
      },
      onComplete: function(request) {
        this.updateChoices(this.cache[this.getToken()] = request.responseText);
      }
    }); 
document.observe('dom:loaded', function() {
new Insertion.After('suche', ' <div id="AutocompleteChoices" class="autocomplete"></div>');
new Ajax.CachedAutocompleter('suche', 'AutocompleteChoices', 'search.php', {
    method: 'post',
    minChars: 3,
      });
});

</code>

und die Datei, die die eigentliche Suche ausführt:

**search.php** die in das root-Verzeichnis gehört

<code php>
<?php
// + Autoren: Andreas Kunert, Andreas Fritsch

//Host für die Weiterleitung ermitteln
$domain = $_SERVER['HTTP_HOST'];
//Prüfen ob Daten per post geliefert werden
if(isset($_POST['suche'])){ 
include_once('backend/inc/config.php');
//include_once('../backend/inc/config.php');// bei Standardinstallation
$suchbegriff = strip_tags($_POST['suche']);
mysql_connect($cfg_cms['db_host'], $cfg_cms['db_user'], $cfg_cms['db_password']) or die ("Verbindung zur Datenbank fehlgeschlagen");
mysql_select_db($cfg_cms['db_database']);
$sql = "select value from ".$cfg_cms['db_table_prefix']."content where value LIKE '%".mysql_real_escape_string($_POST['suche'])."%'";
$result = mysql_query($sql);
// evtll. mysql-fehler ausgeben
echo mysql_error();
// Erstmal die Treffer auslesen
$i = 0;
while(list($ergebnis) = mysql_fetch_array($result)){
$liste = preg_match_all("/\b".$suchbegriff."[a-zA-Z].*?\b/",$ergebnis,$treffer);
// Gefundene Begriffe
$c = array_values($treffer[0]);
if(count($c) > 1){
$tmp = join(",",$c);
if($b == "") $b .= $tmp; else $b .= ",".$tmp;
} elseif(count($c) == "1"){
if($b == "") $b .= $c[0]; else $b .= ",".$tmp;
}
$i++;
}
$t = split(",",$b);
// Array bereinigen
$tmp = array_unique($t);
// Sortieren
sort($tmp);
// Zeiger auf Anfang setzen
reset($tmp);
// alle gefundenen Begriffe auflisten
foreach($tmp as $value){
$li_elem .= "<li>".$value."</li>\n";
}
// Liste zusammenbauen
$ergebnisse = "<ul>\n".$li_elem."</ul>\n";
// Liste ausgeben
echo "$ergebnisse";
}
else  header("Location:http://".  $domain);
?>
</code>

==== Template anpassen ====

Damit die Funktion innerhalb von Sefrengo funktioniert, müssen noch einige Anpassungen am Layout vorgenommen werden. Editieren Sie unter Design → Layouts das gewünschte Layout.

Fügen Sie folgende Zeilen im <head> des Layouts ein:

<code js><script type="text/javascript" src="cms/js/prototype.js"></script>
<script type="text/javascript" src="cms/js/scriptaculous.js"></script>
</code>

Die Bibliothek scriptaculous lädt automatisch die benötigten Dateien nach. Beachten Sie, dass bei dergepackten Version Sie diese manuell ins Layout einbinden müssen.
Zum Schluss fehlt noch 
<code js><script type="text/javascript" src="cms/js/search.js"></script></code>
und die Autocompleterfunktion ist einsatzbereit.

==== CSS ergänzen ====
Das Autocompletefeld muss natürlich gestaltet werden. Folgende Code gehört in die CSS-Datei.

<code css>
.autocomplete{
 background-color: #709dc6
}

.autocomplete ul{
list-style:none;
color:#fff;
margin:0;
background:#86BAC7;
}

.autocomplete ul li{
list-style:none;
display:block;
margin:0;
}

.autocomplete ul li.selected { 
background-color: #435EB3;
color:#fff
}
</code>

==== Livebeispiel und Modul ====

Auf der Seite [[http://www.eltern-fragen.de]] könnt ihr den Autocompleter in Aktion sehen.
Um die Einbindung etwas komfortabler zu gestalten könnt ihr auch [[http://forum.sefrengo.org/index.php?showtopic=2009 | das Modul]] nutzen.

<note autor>
  *[[profil>71|pawel]]
</note>