Autovervollständigen eines Textfeldes

[Tommy75]

Musste leider meine privaten Vorhaben zurückstellen und soll nun ein Rechnungsprogramm für unsere Wirtschaft schreiben.
So weit, so gut.
In einer Tabelle in meiner mySQL-Datenbank stehen alle Speisen und Getränke.
Die Seite, auf der die Rechnungen geschrieben werden, setzt sich aus folgenden Spalten zusammen :

Position - Artikel - Anzahl - Einzelpreis - Gesamtpreis

Nun hätte ich es gerne so, dass beim schreiben in das Feld Artikel ein Optionsmenü oder ähnliches aufgeht, in dem alle (aus der DB ausgelesenen) Artikel angezeigt werden, die mit dem oder den bereits eingetippten Buchstaben beginnen. Also sowas wie Autovervollständigen.

Mit anderen Worten : Ich tippe ins Feld Artikel einen S ein, dann geht ein Optionsmenü auf, in dem z.B. steht

Salat
Schnaps
Schnitzel
Sekt

tippe ich Sc ein, verkleinert sich die Auswahl auf

Schnaps
Schnitzel

Hoffe, es ist klar, was ich vorhabe. Hat irgend jemand vielleicht eine Idee, wie das zu bewerkstelligen ist ? Mein Script müsste ja während des Tippens bereits das Feld auslesen und den Eintrag auswerten, so wie ich das sehe - nur wie ?

Wäre für jeden Ansatz und jede Hilfe dankbar

[hall]

such mal nach autosuggest. entweder werden die speisen in ein array, also statisch verpackt oder per ajax abgerufen.

grüße

[onemorenerd]

Livesearch wäre noch ein Stichwort. Such mal auf dieser Seite.

[Tommy75]

Danke für eure Antworten. Leider hab ich nichts gefunden, was ich nutzen könnte oder ich hab vor lauter Wald die Bäume nicht gesehen

Also hab ich versucht, das Problem zu umgehen. Dabei hab ich festgestellt, dass ich null Ahnung von JS habe. Mein Vorhaben und die bisherige Realisierung :

In einer form wird per onclick ein Fenster (kundendaten.php, dort steht auch eine functions.js zur Verfügung) geöffnet. In Kundendaten.php werden Links erzeugt. Klicke ich einen dieser Links an, werden die zugehörigen Werte (z.B. Vorname) über die functions.js in meine Textfelder in meiner Form eingetragen. Klappt prima soweit und sieht so aus :

rechnungen.php

<script language="JavaScript" type="text/javascript">
<!--
function fensterauf(seite,fenstername,eigenschaft){
window.open(seite,fenstername,eigenschaft);
}
//-->
</script>
.
.
.
<form......
.
.
<input type="button" value="Kunden anzeigen" class="click"
               onClick="fensterauf('kundendaten.php','Zweitfenster','width=500,height=500,scrollbars=yes')">
.
.
</form>

kundendaten.php

<script src="function.js" type="text/javascript"></script>

<?php
$mysqlabfr = "SELECT * FROM kunden";
$mysqlerg = mysql_query($mysqlabfr) or die (mysql_error("Kein Zugriff auf Tabelle kunden !"));
while ($row = mysql_fetch_object($mysqlerg))
      {
      ?>
        <a href='#' onclick="javascript:adresse(
        '<?php echo $row->vorname." ".$row->nachname; ?>',
        '<?php echo $row->strasse." ".$row->hausnummer; ?>',
        '<?php echo $row->plz." ".$row->ort; ?>',
        '<?php echo $row->kdnr; ?>')">
        <?php echo $row->vorname." ".$row->nachname; ?></a><br>
      <?php
      }
?>

functions.js

function adresse(vorname, strasse, plz, kdnr)
  {
  window.opener.document.rechnung.vorname.focus();
  window.opener.document.rechnung.vorname.value =
  window.opener.document.rechnung.vorname.value + vorname;
  window.opener.document.rechnung.vorname.focus();
  window.opener.document.rechnung.strasse.focus();
  window.opener.document.rechnung.strasse.value =
  window.opener.document.rechnung.strasse.value + strasse;
  window.opener.document.rechnung.strasse.focus();
  window.opener.document.rechnung.plz.focus();
  window.opener.document.rechnung.plz.value =
  window.opener.document.rechnung.plz.value + plz;
  window.opener.document.rechnung.plz.focus();
  window.opener.document.rechnung.kdnr.focus();
  window.opener.document.rechnung.kdnr.value =
  window.opener.document.rechnung.kdnr.value + kdnr;
  window.opener.document.rechnung.kdnr.focus();
  window.setTimeout("window.close()", 500);
  }

Wie gesagt, soweit klappt alles einwandfrei. Nur bräuchte ich die Werte, die in meine Textfelder eingetragen werden, auch in einer bzw. mehreren anderen Dateien.

Ich suche also entweder eine Möglichkeit, die JS-Variablen irgendwie an eine session zu übergeben oder ich müsste wissen, wie ich sie direkt in anderen Dateien zur Verfügung stellen kann. Bisher muss ich jedesmal meine rechnungen.php neu laden, damit sie in anderen Dateien zur Verfügung stehen oder abgerufen werden können

[ilch]

Hallo,

vor kurzm habe ich dazu eine kleine Javascript Klasse geschrieben. Es ist kinderleicht.

Schau dir mal die folgende Beispielseite an:
http://www.ilch.de/t.html

Du erstellst einfach ein ganz normales Selectfeld und fügst mit PHP dort alle optionen ein. Dann gibst du dem Selectfeld eine eindeutige ID und die class="autoselect" und fügst die autoselect.js und autoselect.css ein. Und schwupps ist es ein Autovervollständigungs Textfeld :P... (sofern Javascript Funktioniert)

Würde mich freuen wenn es dir weiterhilft.

[Benny-one]

@ilch: die idee is ja nicht schlecht, nur die umsetzung ist es. denn:
1. ewige ladezeiten
2. ist erstmal nur noch ein Wort in der Liste (sabre) geht es unmöglich korrigieren.

ajax ist in dem fall wohl besser

und falls ajax nicht geht, kannst dus (über einen umständlichen weg) auch mittels Flash lösen.

[ilch]

1. Ladezeiten kann man extrem reduzieren indem man ein Limit einbaut (es werden z.b. max 100 Optionen angezeigt) oder indem man das Timeout hochsetzt und den Mitarbeitern sagt in der Timeout zeit möglichst viel zu schreiben :P... (Suche eingrenzen)

2. Hä? du kannst das Wort einfach löschen, wie du es bei Ajax auch müsstest und von vorne anfangen.

Entscheidender Vorteile:
- sehr leichte zu benutzen, viel leichter als Ajax
- es geht auch ohne Javascript (bei Ajax ist das rel. kompliziert) bei mir wird einfach die normale Selectliste angezeigt.

zum Thema Ladezeit (was zugegeben wirklich das größte Problem ist) werde ich die Limitfunktion noch fest einbauen. Mit dem Timeout muss man ein wenig spielen +g+