Combobox dynamisch und editierbar?

[F-W P]

Wie kann ich auf einer HTML-Page eine Combobox erzeugen, die dynamisch auf Eingaben reagiert, und sich dann, z.B. nach dem dritten Zeichen dynamisch aus einer Datenbanktabelle füllt.

Hintergrund:

In der Datenbanktabelle, die zum füllen der Combobox dient stehen mehrere tausend Begriffe, die aber nicht alle in aus der Datenbank in die Combobox geladen werden sollen. Zum anderen sollen Begriffe, die nicht in der Datenbank gespeichert sind dennoch eingebbar sein, dann zwar kein Ergebnis bei der Abfrage zu diesem Begriff liefern, aber für eine spätere Erweiterung in der Datenbank gemerkt werden.

Geht so etwas mit HTML und PHP, oder muss ich da andere technische Hilfsmittel verwenden?

 

[bdt600]

HTML, PHP und AJAX sind die richtigen Kombinationen

 

[F-W P]

Danke für die schnelle Antwort,

das heißt ich benötige also als dritte Komponente noch AJAX? Mal sehen, ob das bei dem Hoster auch unterstützt wird.

 

[bdt600]

Ajax hat nichts mit dem Hoster zu tun

Ajax = Asynchronous JavaScript and XML

 

[SpiceLab]

Zum Kennenlernen und Studium :)

1. https://de.wikipedia.org/wiki/Ajax_(Programmierung)
2. https://wiki.selfhtml.org/wiki/JavaScript/Ajax
3. https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest
4. http://api.jquery.com/jquery.ajax/

Weitere Ressourcen finden sich im Netz per "javascript ajax" und "jquery ajax".

 

[F-W P]

Danke für die Antworten,

das heißt also (jeder) Server, der PHP unterstützt, kann automatisch AJAX "verwenden".

Muss ich die bisherigen Seiten (meist HTML und PHP) vollständig umstellen? Und worauf sollte ich dabei in erster Linie achten? (Softwareentwicklung mittels Delphi, Pascal, Fortran, Basic, ... und Datenbankanwendungen mittels SQL sind mir ja bekannt, aber mit der Webentwicklung hatte ich bislang noch nicht viel zu tun).

Gibt es für die beschriebene Anwendung schon Beispiele hier im Forum?

Die erste Seite, bei der ich dynamische Comboboxen benötige ist eine Suchabfrage, mit momentan zwei Eingabefeldern (dynamische Combobox) mit den Inhalten für "Was wird gesucht" und "Wo wird gesucht". Beide Boxen sollten nach dem Eintippen von Zeichen automatisch Vorschläge bringen, die durch Auswahl übernommen werden können und die sich mit dem Eintippen von weiteren Zeichen immer weiter präzisieren. Die Inhalte für beide Comboboxen sind in separaten MySQL-Datenbanktabellen hinterlegt.

Die erste Box ("Was") sollte außerdem die Möglichkeit zulassen, neue Begriffe die noch nicht in der Datenbank hinterlegt sind zuzulassen, um sie dann in der Datenbank für zukünftige Suchanfragen zu speichern.

Bei der zweiten Box ("Wo") ist das Hinzufügen von bislang in der Datenbank nicht hinterlegten Begriffen nicht notwendig, allerdings wäre hier eine "fehlertolerante Suche" ähnlich wie bei Google mit "meinten Sie ..." hilfreich, wenn es Orte mit ähnlichen Schreibweisen gibt (Mülheim an der Ruhr, Müllheim [Baden], Mühlheim am Main, ...), da viele Mülheim direkt von Mühle ableiten.

 

[bdt600]

Gibt es für die beschriebene Anwendung schon Beispiele hier im Forum?

Glaube ich kaum, aber in den Weiten des Internets wird sich da vielleicht was finden lassen.

Dir sollte aber klar sein, dass, wenn man damit bisher nicht zu tun hatte, dein Vorhaben keine kleine Hausnummer ist, da wirst du einiges an Zeit investieren müssen.

 

[F-W P]

Glaube ich kaum, aber in den Weiten des Internets wird sich da vielleicht was finden lassen.

Da liegt schon ein Problem, weil eine "Auf gut Glücksuche" mit den Begriffen

HTML PHP Combobox dynamisch editierbar​

lieferte nicht wirklich brauchbares, wahrscheinlich heißen diese "comboboxen" mal wieder anders als man es von den anderen Programmiersprachen kennt.

Dir sollte aber klar sein, dass, wenn man damit bisher nicht zu tun hatte, dein Vorhaben keine kleine Hausnummer ist, da wirst du einiges an Zeit investieren müssen.

Der Zeitfaktor ist genau mein Problem, denn um neben meiner regulären Arbeit mal eben schnell so etwas aufzusetzen fehlt mir irgendwie Zeit mich auch noch in dieses umfrangleiche Thema einzuarbeiten, zumal die meisten Tutorials wie SelfHTML, SelfPHP, ... auf solche speziellen Fragen auch nicht so tiefgründig eingehen.

 

[bdt600]

Der Zeitfaktor ist genau mein Problem, denn um neben meiner regulären Arbeit mal eben schnell so etwas aufzusetzen fehlt mir irgendwie Zeit mich auch noch in dieses umfrangleiche Thema einzuarbeiten

Dann hast du ein Problem, mal eben ist das nicht gemacht.

Aber das könnte dir weiterhelfen: http://www.jqueryscript.net/form/jQuery-Plugin-For-Custom-Filterable-Select-Box-Editable-Select.html

 

[F-W P]

Danke,

werde ich mir mal ansehen und dann melde ich mich noch einmal.

 

[B3nnoX]

Ich weiß zwar nicht ob dir das auch helfen würde. Aber HTML bietet zum Beispiel auch eine datalist an

Link: http://html5-webdesign.de/datalist.html
http://html5-webdesign.de/datalist.html
Die Frage wird nur sein, wie viele Begriffe du wirklich da reinladen willst. Ich hab das ehrlich gesagt noch nicht mit mehr als 50 Einträgen verwendet. Daher weiß ich nicht ob dir das was bringt bei einigen Hundert oder Tausend Einträgen

 

[B3nnoX]

Aber ich denke bei mehr als Hundert Einträgen sieht das nicht so schön aus im Quellcode. Deswegen lass mein Vorschlag lieber weg. Das Plugin, welches bdt600 gepostet hatte, sollte dir besser helfen.

 

[sysop]

Noch eine Möglichkeit, die perfekt mit PHP und einer SQL-Abfrage im Hintergrund funktioniert.

source: "search.php"

und man kann Datenbanken recht schön abfragen.
Ein Parameter für eine Mindesteingabe, wann die Suche gestartet werden soll ist ebenfalls vorhanden. Ich setzte das für die Suche nach Artikeln ein und konnte bisher keinerlei Probleme (insbesondere Performance) festellen.

https://jqueryui.com/autocomplete/

 

[F-W P]

Aber ich denke bei mehr als Hundert Einträgen sieht das nicht so schön aus im Quellcode.

Müsste sowieso aus einer DB-Tabelle gelesen werden, da ich nicht bei jeder Erweiterung den Quellcode anpassen möchte. Würde wahrscheinlich auch gehen, dass die "Option Values" aus einer MySQL-Datenbanktabelle gelesen werden können.

 

[F-W P]

Aber das könnte dir weiterhelfen: http://www.jqueryscript.net/form/jQuery-Plugin-For-Custom-Filterable-Select-Box-Editable-Select.html

Habe versucht, das Element gemäß "Anweisung" einzubauen, aber es scheint so, als ob es nicht funktioniert, denn die Auswahlbox mit den Orten verhält sich noch genau so wie vor dem Einbau.

Hat hier jemand dieses Element schon einmal verwendet?

 

[bdt600]

Puuuuhhhhh.

1. Wieso den DocType doppelt?
2. Wieso den Head doppelt?
3. Wieso den Body doppelt?
4. Was soll der echo-Marathon?
5. Wo wird die jquery-Basis eingebunden?

Und bitte poste den Quellcode und nicht als Text-Datei anhängen. Noch besser ist ein Link zur Seite

 

[F-W P]

Die angehängte Datei ist eigentlich die PHP-Datei und die erstellt dann über die echos die Seite für den Browser. Habe die Seite ursprünglich von jemanden übernommen und dann entsprechend erweitert.

Sie liegt unter http://www.1112.eu/intern/start/suche.php

 

[bdt600]

Ist schwer kaputt, siehe https://validator.w3.org/check?verbose=1&uri=http://www.1112.eu/intern/start/suche.php

 

[F-W P]

Ganz verstehe ich die Fehlermeldungen aber nicht, denn wenn ich mir den Quellcode ansehe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="db1112.css">
  <link href="dist/jquery-editable-select.min.css" rel="stylesheet" />
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
  /* Verbindung aufnehmen und Datenbank auswählen */
  include "db1112.inc.php";

  $sql1  = "SELECT * FROM Seitenaufrufe WHERE Seite = upper('Suche')";
  $res1  = mysql_query($sql1);
  $num1  = mysql_num_rows($res1);
  $dsatz1 = mysql_fetch_assoc($res1);

echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>";
echo "<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>";
echo "<head>";

dann müssen sich die Fehlermeldungen irgendwo anderes drauf beziehen oder?

1. 
   Line 4, Column 61: end tag for "link" omitted, but OMITTAG NO was specified
   <link rel="stylesheet" type="text/css" href="db1112.css">
   ✉
   
   You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
   
   
2. 
   Line 4, Column 4: start tag was here
   <link rel="stylesheet" type="text/css" href="db1112.css">

 

[bdt600]

Siehe #16

Weiterhin:

• Stelle auf HTML5 um
• Nutze UTF-8
  
• Die MySQL-Extension von PHP ist veraltet, nutze die MySQLi-Extension