Information & Consulting

Für ein Warenwirtschaftssystem als Web-Applikation soll ein Eingabefeld mit einer Suggest-Box angereichert werden. Damit soll die Usability des Systems verbessert werden. Im konkreten Fall werden Artikel ausgewählt. Bei 1000 Artikeln würde eine Select-Box zu groß und unübersichtlich werden, bei einer normalen Eingabezeile müßte der Sachbearbeiter die Artikelnummer vollständig im Kopf haben. Daher die Idee eine Eingabezeile zu verwenden und mit einem Suggest-Element anzureichern.

Für die Infodrom-Seiten habe ich schon vor langer Zeit ein einfaches Completion-Element implementiert. Für diese Applikation wird jedoch ein komplexeres Element benötigt. Fündig geworden bin ich beim japanischen Autor onozaty, der eine hübsches und schnelles Suggest-Element geschrieben hat.

Sehr leicht läßt es sich in bestehende Seiten einbinden und funktioniert sehr gut. Es ist objektorientiert geschrieben, was Erweiterungen stark erleichtert. In meinem Fall sollen Vorschläge on-demand mittels AJAX aus der Warenwirtschaft ermittelt und dann angezeigt werden. Außerdem soll sowohl der Name des Artikels als auch die Artikelnummer eingegeben werden können.

Dazu werden mehrere Methoden überlagert und zusätzliche Methoden für die Beschaffung der Daten geschrieben, die mit dem Backend über AJAX bzw. »Ajax.Request« aus dem Prototype-Framework kommunizieren. Dieses muß lediglich ein Array »data« liefern, das aus Paaren (Nr,Text) besteht, deren Text angezeigt und deren Nr. letztendlich in das Eingabefeld geschrieben wird.

Diese Erweiterung erwartet bei der Initialisierung die URL zum AJAX-Backend und unterstützt einen weiteren Callback »onComplete«, der nach der Auswahl eines Eintrags ausgeführt wird. Damit besteht die Möglichkeit, bei Übernahme des Wertes aus der Suggest-Box einen der beiden Daten in weitere Felder im Formular zu schreiben.

Den ursprünglichen Code zum Einbinden dieses Elements kann man sogar noch etwas vereinfachen:

   <script type="text/javascript" src="/prototype/prototype.js"></script>
   <script type="text/javascript" src="/suggest/suggest.js"></script>
   <script type="text/javascript" src="/suggest/suggestAjax.js"></script>

   <input type="input" title="ArtikelNr." name="artikel" id="artikel" />
   <span id="artikel_msg">Artikelbezeichnung</span>
   <div class="suggest" id="artikel_suggest"></div>

   <script type="text/javascript">
     new Suggest.Ajax('artikel','artikel_suggest', '/ajax/suggest.php');
   </script>

Die neuen Objekte müssen zwar beim Laden der Seite aufgebaut werden, es ist jedoch nicht erforderlich über den Handler für das »load«-Ereignis zu gehen, sondern der Code darf direkt in die Seite geschrieben werden. Die Optionen sind nicht zwingend erforderlich und dürfen weggelassen werden.

   <script type="text/javascript">
     new Suggest.Ajax('artikel','artikel_suggest', '/ajax/suggest.php',
          {dispMax: 10, onComplete: function(k,v){$('artikel_msg').update(v);}});
   </script>

In diesem zweiten Aufruf wird nach der Auswahl einer Zeile in der Suggest-Box der Name des Artikels in ein bestimmtes Datenfeld auf der Seite geschrieben.