input-Feld mit parent-Element umhüllen?
0 0 0 0 1 5 Suchvorschläge mit datalist
0 0 0 1 0 0
0
0 0 0 Schrödingers Katze
1 0 0 0
0 0 0 0 0
0 1 2 1 0 0
Moin,
ich habe ein input-Feld, in das ein Ortsname eingegeben wird. Während des Befüllens (Tastatur oder Maus copy paste) werden per Ajax Vorschläge geholt und im zugehörigen Vorschlagsfeld darunter angezeigt:
<div style="position:relative">
<input ... id="such_ort" oninput="getOrte( '[HOST]', this )" ... />
<div id="such_ort_vorschlaege" style="position:absolute"></div>
</div>
Das funktioniert gut. Da es im Projekt zahlreiche Felder mit Vorschlagsfunktion gibt, müsste ich doch mit
<input ... id="such_ort" oninput="getOrte( '[HOST]', this )" ... />
auskommen und die anderen Zeilen mit Javascript beim erstmaligen Aufruf von oninput drumrumbasteln. Habe "such_ort" relativ gesetzt und "such_ort_vorschlaege" als Knoten position:absolute dahinter gesetzt. Die Vorschläge poppen dann oben im Display auf, aber nicht hnter dem input Feld. Ist klar.
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
Gruß, Linuchs
Hallo Linuchss,
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
Vielleicht bin ja der Einzige, der die Frage nicht versteht, aber ich verstehe sie nicht.
Gruss
Henry
Hallo,
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
Vielleicht bin ja der Einzige, der die Frage nicht versteht, aber ich verstehe sie nicht.
ich verstehe zwar die abschließende Frage, aber nicht den Hintergrund ...
Ciao,
Martin
Hallo Der,
Hallo,
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
Vielleicht bin ja der Einzige, der die Frage nicht versteht, aber ich verstehe sie nicht.
ich verstehe zwar die abschließende Frage, aber nicht den Hintergrund ...
Sicher? Ein Element -> in ein übergeordnetes Element einhüllen ?
also quasi ein Wohnzimmer umhüllt das Haus?
Gruss
Henry
Hallo,
ich verstehe zwar die abschließende Frage, aber nicht den Hintergrund ...
Sicher? Ein Element -> in ein übergeordnetes Element einhüllen ?
also quasi ein Wohnzimmer umhüllt das Haus?
ja, so ähnlich. Linuchs möchte einen Container (in seinem Fall ein div) um sein input-Element, aber aus mir unerfindlichen Gründen will er den nicht ins Markup schreiben, sondern nachträglich mit Javascript bauen, während das input-Element schon existiert.
Also quasi ein Gewächshaus bauen, während die Stiefmütterchen schon blühen.
Wie gesagt, frag mich nicht nach dem Sinn. Den habe ich auch nicht verstanden.
So long,
Martin
Hallo Martin,
Linuchs möchte einen Container (in seinem Fall ein div) um sein input-Element, aber aus mir unerfindlichen Gründen will er den nicht ins Markup schreiben, sondern nachträglich mit Javascript bauen, während das input-Element schon existiert.
Das ist eine konsequente Weiterentwicklung von hier empfohlenen Richtlinien.
Ich soll ja nicht mehr <body onload=...
verwenden und auch Event-Handler nicht beim Element einrichten, sondern sowas nutzen, um z.B. eine unbestimmte Menge Info-Schaltflächen klickbar zu machen:
window.addEventListener('DOMContentLoaded', function ( ) {
obj_help = document.getElementsByClassName( "help" );
for ( i=0; i<obj_help.length; i++ ) {
...
obj_help[i].addEventListener('click', function (event) { // click-Event setzen
... });
}
}
Das habe ich inzwischen gut verstanden. Es gefällt mir, dass *.js Dateien ihre Bedingungen selbst setzen um später damit zu arbeiten.
So sind auch Vorschlagsbereiche in vielen Programmen vorhanden. Da kann ich genausogut die Routinen von Javascript einrichten lassen und muss das in den einzelnen Programmen nicht selbst tun.
Also quasi ein Gewächshaus bauen, während die Stiefmütterchen schon blühen.
Sehr gut verstanden. Wenn ich keine Stiefmütterchen habe, brauche ich auch kein Gewächshaus. Oder noch besser: Erst dann, wenn ein Kunde Stiefmütterchen will, brauche ich einen Verkaufsraum mit Kasse. Das ist virtual reality. Der Mond muss doch auch erst dann scheinen, wenn einer hinguckt.
Also erst dann, wenn jemand einen Ort sucht, muss ich das Feld für die Vorschlagswerte einrichten und spare mir das ganze HTML-Gedöns auf Verdacht.
An dem Bild ist gut zu sehen, warum das Vorschlagsfeld kein Sibling des Input-Feldes ist. Dann könnte es ja den Bildschirm-Inhalt nicht überlappen, sondern würde die folgenden Felder nach unten stoßen und beim Schließen wieder nach oben zucken. Sieht doch sch** aus.
Linuchs
Grundlage für Zitat #2502.
Servus!
Linuchs möchte einen Container (in seinem Fall ein div) um sein input-Element, aber aus mir unerfindlichen Gründen will er den nicht ins Markup schreiben, sondern nachträglich mit Javascript bauen, während das input-Element schon existiert.
Das ist eine konsequente Weiterentwicklung von hier empfohlenen Richtlinien.
Ich soll ja nicht mehr
<body onload=...
verwenden und auch Event-Handler nicht beim Element einrichten, sondern sowas nutzen, um z.B. eine unbestimmte Menge Info-Schaltflächen klickbar zu machen:
Das habe ich inzwischen gut verstanden. Es gefällt mir, dass *.js Dateien ihre Bedingungen selbst setzen um später damit zu arbeiten.
Ja, das ist alles gut. Das Grundproblem ist aber das Container-Element UM das input-Element herum.
Was die anderen so erheitert, ist, dass Du einen bestehenden Elementbaum im DOM um ein Elternelement erweitern willst. Du müsstest also das input entfernen, an dessen Elternelement ein Kindelement erzeugen und dann das gelöschte input in dieses als Enkel wieder einhängen. Ja ne is klar, oder?
Ich würde erst mal die Aufgabe formulieren:
Also erst dann, wenn jemand einen Ort sucht, muss ich das Feld für die Vorschlagswerte einrichten und spare mir das ganze HTML-Gedöns auf Verdacht.
An dem Bild ist gut zu sehen, warum das Vorschlagsfeld kein Sibling des Input-Feldes ist. Dann könnte es ja den Bildschirm-Inhalt nicht überlappen, sondern würde die folgenden Felder nach unten stoßen und beim Schließen wieder nach oben zucken. Sieht doch sch** aus.
In HTML5 verwendet man für so etwas das schon erwähnte datalist-Element. Und das sieht nicht wie von Dir befürchtet aus:
in Firefox:
in Chrome:
Fazit:
Erzeuge input, label und datalist zusammen. Stell Dir mal vor ich suche was und nach 3sec (bei schlechter Datenübertragungsrate, Responsetime) kommen dann Deine Suchvorschläge nachgeladen.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
danke für den Hinweis auf datalist, damit wäre ein Problem gelöst. Nämlich wie ich ohne Mausklick in die Vorschlags-Liste komme (per Runter- oder Rauf-Taste).
Allerdings geht es bei mir nicht um ein paar dutzend Daten wie beim Vogelbeispiel, sondern um tausende. Städtenamen etwa. Und es nutzt nichts, den richtigen Namen wie "Neustadt" gefunden zu haben, ich brauche die ort_id, denn es gibt dutzende von Neustädten. Und dutzende Berline, alle mit anderer Postleitzahl und geografischen Koordinaten.
Wenn ich nach Albatros suche, ist bei dem Vogelbeispiel schon beim zweiten Buchstaben Schluß mit Vorschlägen. Kann ich so gar nicht gebrauchen.
Kann man eine datalist ändern, anpassen, während der Eingabe ins Input-Feld? Das würde deine Zeit-Befürchtung zwar nicht entschärfen. aber mein Problem lösen, einen Vorschlag per Tastatur auszuwählen. Bisher nur per Mausklick.
Stell Dir mal vor ich suche was und nach 3sec (bei schlechter Datenübertragungsrate, Responsetime) kommen dann Deine Suchvorschläge nachgeladen.
Tja, wenn du schon 30 sec auf die Seite gewartet hast, bist du ja im Training ;-) Und du wirst froh sein, dass beim Seitenaufbau (meine neueren Programme) nicht die gesamte HTML-Struktur mitkommt, sondern nur Netto-Daten. HTML-Listen und Tabellen werden beim Client per Javascript generiert.
Input: Bei jedem neuen Zeichen hole ich per Ajax 10 .. 20 Vorschläge aus der Datenbank und übertrage die in der kürzesten Form die ich kenne: Als CSV-String, nur ein paar hundert Byte. Das PHP-Programm auf Server-Seite braucht nur wenige hundertstel Sekunden.
Gruß, Linuchs
Hallo
Allerdings geht es bei mir nicht um ein paar dutzend Daten wie beim Vogelbeispiel, sondern um tausende. Städtenamen etwa. Und es nutzt nichts, den richtigen Namen wie "Neustadt" gefunden zu haben, ich brauche die ort_id, denn es gibt dutzende von Neustädten. Und dutzende Berline, alle mit anderer Postleitzahl und geografischen Koordinaten.
Die <option>
-Elemente funktionieren genauso wie innerhalb eines <select>
. Du kannst also einen Textinhalt einsetzen und dem Attribut value
einen anderen Wert zuweisen.
Kann man eine datalist ändern, anpassen, während der Eingabe ins Input-Feld? Das würde deine Zeit-Befürchtung zwar nicht entschärfen. aber mein Problem lösen, einen Vorschlag per Tastatur auszuwählen. Bisher nur per Mausklick.
Du kannst im <input>
auf das Event change
horchen und per Ajax die passenden Einträge ermitteln lassen und in die <datalist>
einfügen.
Tschö, Auge
Hallo Auge,
Du kannst im <input> auf das Event change horchen und per Ajax die passenden Einträge ermitteln lassen und in die <datalist> einfügen.
Habe ich versucht, irgendwie klappt das nur zufällig, ich weiß nicht warum. Bei Aufruf der Seite habe ich vier Test option Zeilen in der Datalist, die bei Eingabe des ersten Zeichens durch das Ajax-Ergebnis ersetzt werden.
Ich suche nach dem Ort "Celle". Nach der Eingabe von zwei Zeichen erscheint dieses Bild mit nur einem Vorschlag:
Als Auswahl-Quelltext bekomme ich dieses:
<label>
<input required="" id="such_ort" list="such_ort_vorschlaege" type="search" name="ort" maxlength="50" value="Bobenheim-Roxheim" style="width:100%" title="ajaxGetOrte.js http://remso.eu/ajax/ajaxGetOrte.php?such_ort=ce" oninput="getOrte( 'remso.eu', this )">
<datalist id="such_ort_vorschlaege" style="left: 12px; min-width: 749px; top: 23px;">
<option value="Čelákovice"></option>
<option value="Ascoli Piceno"></option>
<option value="Barcelona"></option>
<option value="Celle"></option>
<option value="Celle"></option>
<option value="Celle"></option>
<option value="Celle"></option>
<option value="Celle"></option>
<option value="Delfzijl"></option>
<option value="Gloucester"></option>
</datalist>
</label>
Schon merkwürdig, dass als value noch der alte Wert Bobenheim-Roxheim drinsteht. Aber das wird wohl nicht der Grund sein, warum nur ein Wert von zehn gezeigt wird.
Und ich weiß nicht, wie ich die ort_id übernehmen könnte. Celle hat mehrere Postleitzahlen, also mehrere ort_id.
Hallo
Ich suche nach dem Ort "Celle". Nach der Eingabe von zwei Zeichen erscheint dieses Bild mit nur einem Vorschlag:
Komisch.
Als Auswahl-Quelltext bekomme ich dieses:
<label> <input required="" id="such_ort" list="such_ort_vorschlaege" type="search" name="ort" maxlength="50" value="Bobenheim-Roxheim" style="width:100%" title="ajaxGetOrte.js http://remso.eu/ajax/ajaxGetOrte.php?such_ort=ce" oninput="getOrte( 'remso.eu', this )"> <datalist id="such_ort_vorschlaege" style="left: 12px; min-width: 749px; top: 23px;"> <option value="Čelákovice"></option> <option value="Ascoli Piceno"></option> <option value="Barcelona"></option> <option value="Celle"></option> <option value="Celle"></option> <option value="Celle"></option> <option value="Celle"></option> <option value="Celle"></option> <option value="Delfzijl"></option> <option value="Gloucester"></option> </datalist> </label>
Schon merkwürdig, dass als value noch der alte Wert Bobenheim-Roxheim drinsteht.
Ist das der Wert, der schon vor der Suche drin stand?
Aber das wird wohl nicht der Grund sein, warum nur ein Wert von zehn gezeigt wird.
Das kann ich mir nicht vorstellen.
Und ich weiß nicht, wie ich die ort_id übernehmen könnte. Celle hat mehrere Postleitzahlen, also mehrere ort_id.
Wenn du den Stadtnamen (zumal ohne Unterscheidung der Postleitzahlen) im Value hast, ist das kein Wunder. Ich hatte dir nicht umsonst vorgeschlagen, unterschiedliche Text- und Value-Attribut-Werte zu benutzen. Jetzt mal unabhängig von dem Problem nur eines Vorschlags, zu dem mir auf Anhieb nichts einfällt, wäre das hier eine meiner Meinung nach passenden Struktur.
<datalist id="such_ort_vorschlaege">
<option value="73">Čelákovice</option>
<option value="9421">Ascoli Piceno</option>
<option value="389">Barcelona</option>
<option value="1278">29221 Celle</option>
<option value="1279">29223 Celle</option>
<option value="1277">29225 Celle</option>
<option value="1280">29227 Celle</option>
<option value="1276">29229 Celle</option>
<option value="44">Delfzijl</option>
<option value="837">Gloucester</option>
</datalist>
Tschö, Auge
Hallo,
deine datalist ...
<option value="9421">Ascoli Piceno</option>
<option value="389">Barcelona</option>
<option value="1278">29221 Celle</option>
... sieht ja extrem anders aus als die vom self-Wiki:
<option value="Amsel">
<option value="Buntspecht">
<option value="Drossel">
Ich will nicht über das self-WIKI klagen, aber mir liegen mehr die Beispiele von W3Schools. Obwohl - in diesem Fall sind sie auch nicht besser. Und abgeschrieben von developer.mozilla.org
Und aus Sympathie schaue ich immer mal wieder auf "unser" WIKI
Hatte schon gesehen, dass der FF schließende Tags hinzugefügt hat.
Jetzt muss ich mich mal schlau machen, wie ich mehrere Werte aus einer Position der datalist übernehmen kann.
Hallo
deine datalist ...
<option value="9421">Ascoli Piceno</option> <option value="389">Barcelona</option> <option value="1278">29221 Celle</option>
... sieht ja extrem anders aus als die vom self-Wiki:
<option value="Amsel"> <option value="Buntspecht"> <option value="Drossel">
Beides geht. Gleichartige Beispiele für beide Vorgehensweisen wirst du für <option>
in <select>
finden.
Jetzt muss ich mich mal schlau machen, wie ich mehrere Werte aus einer Position der datalist übernehmen kann.
Ich befürchte, dass das nicht funktionieren wird. Von dieser Anforderung war im Thread bisher auch nicht die Rede, wenn ich nichts überlesen habe.
Tschö, Auge
Jetzt mal unabhängig von dem Problem nur eines Vorschlags, zu dem mir auf Anhieb nichts einfällt,
Mir fällt da was ein.
Ich tippe einen Buchstaben und was macht HTML? Es wird in einer Zeit X die vorhandenen Vorschläge einblenden.
Nach dem getippten Zeichen (oninput) wird Ajax aktiv, der Server antwortet, die neue Liste wird noch mit Javascript aufbereitet in der Zeit Y.
Vermutlich gewinnt HTML das Rennen vor Javascript, leider zuungusten des Lesers.
In meiner selbstgestrickten Lösung ist das auch ein Problem. Ich blende die Vorschlagsliste ein und wenn ich auf einen Wert zwecks Übernahme klicke, verliert das Input-Feld den Fokus (onblur), und die Vorschläge werden mit mit display:none ausgeblendet. Nicht immer scheint das System zu wissen, wohin geklickt wurde, kurz bevor der Link verschwand.
In meiner Bastelstube sieht das dann so aus:
<p class="co mb00">Ortsname</p>
<div style="position:relative;">
<input
id = "such_ort"
type = 'text'
name = 'such_ort'
size = "25"
maxlength = "25"
value = "[such_ort]"
placeholder = "Ortsname"
oninput = "getOrte( '[HOST]', this )"
onblur = "schliesseGetOrte()"
/>
<div id='such_ort_vorschlaege' class="vorschlaege"></div>
</div>
/* das Loeschen der Vorschlaege muss verzögert werden, wiel der "blur" schneller ist. */
function go_loescheDiv() {
ajaxGetOrteVar.obj_vorschlaege.style.display = "none";
}
function schliesseGetOrte() {
window.setTimeout("go_loescheDiv()",500);
}
Wie kann ich die Anzeige der datalist verzögern? Oder wie macht Google das, die antworten doch auch mit nachgeladenen Vorschlägen bei der Suche.
Gruß, Linuchs
EDIT: Mir fällt gerade eine Verbesserung meiner bisherigen Lösung ein. Nicht nach 0,5 s die Vorschläge wegzaubern (0,2 war zu kurz), sondern nach erfolgter Daten-Übernahme.
EDIT 2: Nee, geht so nicht. Ich muss die Vorschläge auch ausblenden, wenn nicht auf einen Vorschlag geklickt wurde.
Moin,
Also quasi ein Gewächshaus bauen, während die Stiefmütterchen schon blühen.
Sehr gut verstanden. Wenn ich keine Stiefmütterchen habe, brauche ich auch kein Gewächshaus. Oder noch besser: Erst dann, wenn ein Kunde Stiefmütterchen will, brauche ich einen Verkaufsraum mit Kasse. Das ist virtual reality. Der Mond muss doch auch erst dann scheinen, wenn einer hinguckt.
das mit dem Mond gefällt mir. Ich wollte auch schon immer mal nachsehen, ob das Licht im Kühlschrank auch brennt, wenn die Tür zu ist. ;-)
Also erst dann, wenn jemand einen Ort sucht, muss ich das Feld für die Vorschlagswerte einrichten und spare mir das ganze HTML-Gedöns auf Verdacht.
Ah, jetzt habe ich das verstanden! Ich bin davon ausgegangen, dass die Liste mit den Vorschlägen permanent sichtbar ist. Klar, wenn du sie nur bei Bedarf einblenden und vor allem dem übrigen Inhalt überlagern willst, musst du natürlich mit position jonglieren und brauchst einen umgebenden Container, an dem sich die Position orientiert.
An dem Bild ist gut zu sehen, warum das Vorschlagsfeld kein Sibling des Input-Feldes ist. Dann könnte es ja den Bildschirm-Inhalt nicht überlappen, sondern würde die folgenden Felder nach unten stoßen und beim Schließen wieder nach oben zucken. Sieht doch sch** aus.
Ja, okay. Verstanden.
Schönen Sonntag,
Martin
@@Der Martin
Ich wollte auch schon immer mal nachsehen, ob das Licht im Kühlschrank auch brennt, wenn die Tür zu ist. ;-)
Kühli du hast mich sehr enttäuscht und dir, dir hab ich blind vertraut
obwohl ich mir nicht sicher war, ob das Licht ausgeht, wenn die Tür zuhaut
—Stoppok, Der Kühlschrank (Text)
LLAP 🖖
Hallo Der,
das mit dem Mond gefällt mir. Ich wollte auch schon immer mal nachsehen, ob das Licht im Kühlschrank auch brennt, wenn die Tür zu ist. ;-)
Ist der Kühlschrank denn überhaupt da, wenn du nicht hinschaust? Ebenso der Mond? 😉
Gruss
Henry
Hallo,
das mit dem Mond gefällt mir. Ich wollte auch schon immer mal nachsehen, ob das Licht im Kühlschrank auch brennt, wenn die Tür zu ist. ;-)
Ist der Kühlschrank denn überhaupt da, wenn du nicht hinschaust?
hmm, gute Frage. Aber ja, manchmal höre ich ihn.
Viel wichtiger ist aber doch, ob etwas Gutes drin ist, wenn ich ihn aufmache!
Ebenso der Mond?
Hmm, den höre ich nicht. *grübel*
Ciao,
Martin
@@Der Martin
Ebenso der Mond?
Hmm, den höre ich nicht. *grübel*
„Guter Mond, du gehst so stille / in den Abendwolken hin“
LLAP 🖖
Hallo Der,
Ist der Kühlschrank denn überhaupt da, wenn du nicht hinschaust?
hmm, gute Frage. Aber ja, manchmal höre ich ihn.
Wow, das ist mal ein interessante Ansatz, geradezu revolutionär Ich habe schon so viel zu dem Thema gelesen und geschaut, noch nie "niemals" (so weit ich weiß) hat jemand gesagt, solange die Katze schreit, lebt sie auch noch. So simple dein Gedankengang scheint, ich bin darauf noch nie gekommen und ich glaube die meisten der Fachleute auch nicht. Coole Sache.
Gruss
Henry
Hallo,
Ist der Kühlschrank denn überhaupt da, wenn du nicht hinschaust?
hmm, gute Frage. Aber ja, manchmal höre ich ihn.
Wow, das ist mal ein interessante Ansatz, geradezu revolutionär Ich habe schon so viel zu dem Thema gelesen und geschaut, noch nie "niemals" (so weit ich weiß) hat jemand gesagt, solange die Katze schreit, lebt sie auch noch.
naja, warum sollte man sich nur auf einen seiner acht Sinne[1] verlassen?
So simple dein Gedankengang scheint, ich bin darauf noch nie gekommen und ich glaube die meisten der Fachleute auch nicht. Coole Sache.
Ganzheitliche Betrachtung. :-)
Ciao,
Martin
Jedenfalls habe ich in der Schule gelernt, dass der normal entwickelte Mensch acht Sinne hat: Sehen, Hören, Tasten, Riechen, Schmecken, dazu der Gleichgewichtssinn, der Temperatursinn und der Schmerzsinn. Keine Ahnung, warum man oft von den fünf Sinnen spricht ... ↩︎
Hi,
Der Mond muss doch auch erst dann scheinen, wenn einer hinguckt.
Mit der Sonne ist's auch nicht besser:
tagsüber, wenn's sowieso hell ist, scheint sie, aber abends, wenn's dunkel wird und man sie brauchen würde, geht sie unter …
cu,
Andreas a/k/a MudGuard
Hallo,
Mit der Sonne ist's auch nicht besser:
tagsüber, wenn's sowieso hell ist, scheint sie, aber abends, wenn's dunkel wird und man sie brauchen würde, geht sie unter …
Das hat sich der Photovoltaik-Erfinder auch gefragt und eingermaßen erfolgreich etwas dagegen unternommen…
Gruß
Kalk
Hello,
Hallo,
Mit der Sonne ist's auch nicht besser:
tagsüber, wenn's sowieso hell ist, scheint sie, aber abends, wenn's dunkel wird und man sie brauchen würde, geht sie unter …
Das hat sich der Photovoltaik-Erfinder auch gefragt und eingermaßen erfolgreich etwas dagegen unternommen…
Kennst Du dich näher aus mit den Entwicklungen in diesem Bereich?
Ich suche da noch Insider mit Chinesischkenntnissen.
Gretzel-Zelle, Photosynthese, Bio-Brennstoffzelle, Chloroplasten-Akkumulator, ...?
Da kommt viel Interessantes auf uns zu die nächsten 10 bis 20 Jahre.
Glück Auf
Tom vom Berg
Hallo,
Kennst Du dich näher aus mit den Entwicklungen in diesem Bereich?
Du willst damit sagen, dass es nicht den einen Erfinder gab?
Gruß
Kalk
Hello,
Kennst Du dich näher aus mit den Entwicklungen in diesem Bereich?
Du willst damit sagen, dass es nicht den einen Erfinder gab?
So kann man das auch auslegen, wenn man möchte ;-)
Ich versuche ja schon seit Jahrzehnten, endlich eine Wechselspannungsbatterie zu erfinden ;-p
Glück Auf
Tom vom Berg
Hallo,
ich habe ein input-Feld, in das ein Ortsname eingegeben wird. Während des Befüllens (Tastatur oder Maus copy paste) werden per Ajax Vorschläge geholt und im zugehörigen Vorschlagsfeld darunter angezeigt:
<div style="position:relative"> <input ... id="such_ort" oninput="getOrte( '[HOST]', this )" ... /> <div id="such_ort_vorschlaege" style="position:absolute"></div> </div>
an dem Code-Schnipsel fallen mir mehrere Dinge auf:
Das funktioniert gut. Da es im Projekt zahlreiche Felder mit Vorschlagsfunktion gibt, müsste ich doch mit
<input ... id="such_ort" oninput="getOrte( '[HOST]', this )" ... />
auskommen und die anderen Zeilen mit Javascript beim erstmaligen Aufruf von oninput drumrumbasteln.
Mag sein, aber ich verstehe den Sinn nicht.
Habe "such_ort" relativ gesetzt und "such_ort_vorschlaege" als Knoten position:absolute dahinter gesetzt. Die Vorschläge poppen dann oben im Display auf, aber nicht hnter dem input Feld. Ist klar.
Nö, ist nicht klar. Keine Ahnung, was du dabei im Sinn hast.
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
IMO wäre das mit einer umständlichen DOM-Transplantation möglich, aber völlig unnötig.
Ciao,
Martin
Hi,
<div style="position:relative"> <input ... id="such_ort" oninput="getOrte( '[HOST]', this )" ... /> <div id="such_ort_vorschlaege" style="position:absolute"></div> </div>
gibt's dafür nicht <datalist>
?
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
parentElement.appendChild(input);
Da ein Element nur ein parent haben kann, wird es dabei automatisch aus dem ursprünglichen parent ausgehängt.
cu,
Andreas a/k/a MudGuard
Hallo MudGuard
Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.
parentElement.appendChild(input);
Da ein Element nur ein parent haben kann, wird es dabei automatisch aus dem ursprünglichen parent ausgehängt.
Damit ist allerdings auch die ursprüngliche Position des Elements verloren. Das ist ja meistens nicht das, was man erreichen möchte.
Angenommen, wir hätten die folgende Struktur …
<section>
<h2>Beispiel</h2>
<p>a</p>
<p>b</p>
<p>c</p>
</section>
… und wollten den ersten Absatz in ein div
hüllen.
const {parentElement} = p;
div.appendChild(p);
parentElement.appendChild(div);
Würden wir dabei so wie oben vorgehen, dann würde das div
und der von ihm eingeschlossene Absatz als letztes Kind von section
einsortiert.
<section>
<h2>Beispiel</h2>
<p>b</p>
<p>c</p>
<div>
<p>a</p>
</div>
</section>
Besser wäre es, zunächst den Absatz durch das div
zu ersetzen und ihn danach zu dessen Kindelement zu machen.
p.replaceWith(div);
div.appendChild(p);
Die Referenz auf das Elternelement wäre in diesem Fall entbehrlich.
Durch den Aufruf der Methode replaceWith
werden an der Position des Kontextobjektes in der Liste der Kindknoten des Elternelements die als Argumente übergebenen Knoten oder Zeichenketten eingefügt.[1]
<section>
<h2>Beispiel</h2>
<div>
<p>a</p>
</div>
<p>b</p>
<p>c</p>
</section>
Wenn die Transformation auch in älteren Browsern wie dem Internet Explorer funktionieren soll, könnte stattdessen auch die Methode replaceChild
verwendet werden.
var parentElement = p.parentElement;
parentElement.replaceChild(div, p);
div.appendChild(p);
Anders als bei replaceWith
wird hier eine Referenz auf das Elternelement benötigt und es kann nur ein einzelner Knoten als Ersatz angegeben werden.[2]
Viele Grüße,
Orlok
Hallo Orlok,
const {parentElement} = p;
Ich glaube nicht, dass ich mich in diesem Leben an solcherlei codetechnische Kryptographie noch gewöhnen werde. "Destrukturierende Deklaration" - allein der Begriff bricht mir Zunge und Finger.
Letztlich ist es doch nur ein Lesbarkeitsschleier (auch Syntaxzucker genannt) für dies hier:
const parentElement = p.parentElement;
und die ungezuckerte Version empfinde ich als deutlich genießbarer.
Rolf
Hallo Rolf,
und die ungezuckerte Version empfinde ich als deutlich genießbarer.
das mag für ein Feld gelten. Für mehrere Felder allerdings ist die Variante mit dem Destructuring lesbarer. Zumal das Konstrukt auch in einen Funktions-Deklaration z.B. funktioniert und damit sofort deutlich klar wird, um welchen Feld des Objektes es eigentlich geht, etwa bei Callback-Funktionen:
const obj = {field: 1, anotherField: 2};
const mul = ({ field, anotherField }) => field * anotherField;
mul(obj);
LG,
CK
Hallo Rolf
const {parentElement} = p;
Ich glaube nicht, dass ich mich in diesem Leben an solcherlei codetechnische Kryptographie noch gewöhnen werde. "Destrukturierende Deklaration" - allein der Begriff bricht mir Zunge und Finger.
Letztlich ist es doch nur ein Lesbarkeitsschleier (auch Syntaxzucker genannt) für dies hier:
const parentElement = p.parentElement;
und die ungezuckerte Version empfinde ich als deutlich genießbarer.
Mir kommt diese Version wiederum unnötig umständlich vor.
Du hast natürlich recht, wenn du darauf hinweist, dass die Deklaration mit explizitem Zugriff auf das Feld den Ablauf bei der Auswertung des Ausdrucks deutlicher herausstellt. In dieser Hinsicht ist die Syntax für die Destrukturierung sicherlich abstrakter. Das ist allerdings nicht die einzige Perspektive, aus der man dieses sprachliche Konstrukt betrachten kann.
Die beiden Ausdrücke sind eigentlich ein schönes Beispiel für die synaktischen Ausprägungen der unterschiedlichen Ansätze der deklarativen und der imperativen Programmierung. Während bei der Destrukturierung der logische Zusammenhang veranschaulicht wird, folgt die Syntax mit explizitem Feldzugriff den einzelnen Schritten des Algorithmus. Einmal betone ich als Autor, was ich erreichen möchte und einmal, wie ich es zu erreichen gedenke.
Die Syntax für die Destrukturierung ist dabei nicht willkürlich gewählt, sondern als syntaktisches Gegenstück zur Definition von Objekten in Literalschreibweise gedacht, bei der es sich ebenfalls um eine deklarative Syntax handelt. Auch bei der Definition von Objekten habe ich die Wahl, stattdessen eine imperative Syntax zu verwenden:
// Erzeuge ein Objekt und füge Eigenschaften hinzu!
const film = new Object();
film.name = 'Nosferatu – Phantom der Nacht';
film.year = 1979;
film.director = 'Werner Herzog';
Hier kann man wieder argumentieren, dass im Vergleich zur Definition mit einem Objektliteral der Ablauf des Programms durch die Syntax besser verdeutlicht wird. Aus meiner Sicht ist diese Version jedoch viel zu umständlich, da ich analog zur Wiederholung des Eigenschaftsnamens im Eingangsbeispiel hier den Namen des Objektes für jede Eigenschaftsdefinition wiederholen muss.
Da ich für die Definition von Objekten die Literalschreibweise bevorzuge, ist es nur konsequent, dass ich auch beim Zugriff eine deklarative Syntax verwenden möchte. Der Bezug wird deutlich, wenn man die Erzeugung und die Destrukturierung eines Objekts direkt gegenüberstellt:
// Strukturierung
const film = { name: 'Aguirre, der Zorn Gottes',
year: 1972,
director: 'Werner Herzog' };
// Destrukturierung
const { name,
year,
director } = film;
Die beiden Sprachkonstrukte sind symmetrisch. Mit derselben Syntax, mit der ich eine Eigenschaft definiert habe, greife ich auch auf sie zu. Wenn man diese Vorstellung zu Grunde legt, dann sollte die Syntax für die Destrukturierung nicht mehr kryptisch erscheinen.
Wie schnell man sich an diese Syntax gewöhnt und ob man sich überhaupt an sie gewöhnen will, hängt sicher auch davon ab, ob man bereits Erfahrungen mit deklarativer Programmierung gesammelt hat und ob einem dieses Paradigma zusagt oder nicht, zumal Destrukturierung und das syntaktisch ähnliche Pattern Matching hier unverzichtbare Grundbausteine der Sprachen darstellen.
-- Beispiel für Destrukturierung in Haskell
data Film = Film String Int
deriving (Eq, Show)
(Film name year) = Film "Fitzcarraldo" 1982
Destrukturierung und Pattern Matching sind semantisch übrigens nicht dasselbe. Zwar kann Pattern Matching dazu verwendet werden, Werte aus zusammengesetzten Datentypen an Bezeichner zu binden, aber der wesentliche Zweck ist hier die Fallunterscheidung. Ein Wert wird mit mehreren Mustern verglichen und bei Übereinstimmung der mit dem Muster assoziierte Ausdruck ausgewertet.
Viele Grüße,
Orlok