• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[MYSQL] SQL-Tabelle mit JavaScript durchsuchen und Ergebnisse anzeigen

U

ufidul

New member
Hallo,

ich suche nach einer Lösung für das folgende Problem:
Ich habe ein Adressbuch in MySQL gespeichert und möchte das man in einem Formular die Namen der Adressaten eingeben kann. Dann möchte ich mit JavaScript die Tabelle in MySQL live durchsuchen und die Ergebnisse in einem kleinen Fenster (wie bei der Stichwortauswahl hier im Forum) anzeigen lassen, sodass man Einträge auswählen kann. Die möchte ich dann nach der ID des Tabelleneintrags speichern, sodass ich sie dann an ein PHP-Skript übergeben kann. Das sucht dann die Einträge heraus und versendet eine E-Mail an die Empfänger.
Ich habe schon an <datalist> gedacht, aber das Problem ist, dass unter Umständen eine Person mehrere E-Mail-Adressen besitzt und das Formularfeld hinterher nur die IDs der Einträge übergeben soll, im Feld sollen aber (wie bei web.de oder gmx.de die Namen als einzelne "Blöcke" stehen. Daher ist <datalist> für mich keine Option.
Gibt es dafür vorgefertigte Lösungen oder habt ihr vielleicht eine Idee, wie ich das lösen könnte?

Gruss

ufidul
 
Zuletzt bearbeitet:
ufidul schrieb:
mit JavaScript die Tabelle in MySQL live durchsuchen
Zum Vergrößern anklicken....
Da eine mySQL-DB nicht öffentlich erreichbar sein sollte, wirst du da um einen PHP-Zwischenschritt nicht herumkommen.
Also nach dem Tippen ein XHR an den Server starten, der dann ein Skript ausführt, dass in der DB sucht und dann das Ergebnis zurück sendet. Das kannst du dann anzeigen lassen und damit weiterarbeiten.
 
ufidul schrieb:
Danke.
Zum Vergrößern anklicken....
Bitte - gern geschehen.

ufidul schrieb:
Hat jemand vielleicht eine Idee, wie das klappen könnte?
Zum Vergrößern anklicken....
Das ist etwas komplizierter und würde ich an deiner Stelle hinten anstellen. Aber als Ansatz könntest du sowas nehmen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.collection {
	display: inline-block;
	margin: 2px;
	padding: 2px;
	border: 2px inset gray;
}
.collection .item {
	display: inline-block;
	border: 1px solid blue;
	background-color: lightblue;
	padding: 2px;
	margin-right: 2px;
	border-radius: 3px;
	height: 1em;
	vertical-align: middle;
}

.collection input {
	border: none;
	padding: 3px;
	display: inline-block;
	height: 1em;
	font-size: 100%;
	vertical-align: middle;
}
</style>
</head>
<body>
Enter values comma seperated.
<label class="collection"><input name="name[]"></label>
<script type="text/javascript">

Array.from(document.querySelectorAll(".collection input")).forEach(function(input){
	input.addEventListener("input", function(){
		if (this.value.indexOf(",") !== -1){
			var parts = this.value.split(",");
			parts.forEach(function(part){
				part = part.trim();
				if (part){
					var node = document.createElement("span");
					node.className = "item";
					node.appendChild(document.createTextNode(part));
					var input = document.createElement("input");
					input.type = "hidden";
					input.name = this.name;
					input.value = part;
					node.appendChild(input);
					this.parentNode.insertBefore(node, this);
				}
			}, this);
			this.value = "";
		}
	});
});
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben