nicht angemeldet
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
input-Feld mit parent-Element umhüllen?
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--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
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--
Wer andern eine Bratwurst brät, hat wohl ein Bratwurstbratgerät.-
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--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
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--
Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.-
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
-
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:
- Eingabefeld mit Suchvoschlägen
- Erst wenn jemand was eingibt, sollen die Suchvorschläge nachgeladen werden.
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
--
Heute mal keine Signatur-
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 Attributvalueeinen 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 Eventchangehorchen und per Ajax die passenden Einträge ermitteln lassen und in die<datalist>einfügen.Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
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
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
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
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett
-
-
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--
Was ist wichtiger - der Mond oder die Sonne?
Der Mond. Die Sonne scheint tagsüber, wenn es sowieso hell ist.-
@@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 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling -
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--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
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--
Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.-
@@Der Martin
Ebenso der Mond?
Hmm, den höre ich nicht. *grübel*
„Guter Mond, du gehst so stille / in den Abendwolken hin“
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling -
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--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
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--
Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
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--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.-
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--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
-
-
-
-
-
-
-
-
-
-
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:
- Warum die Klimmzüge mit position? Das dem input-Element folgende div wird als Blockelement sowieso direkt unterhalb davon angeordnet.
- Ist die ID für den div-Container mit den Vorschlägen nötig? Eventuell um das Element mit Javascript leichter zu finden. Allerdings findet man es auch über die ID des input-Elements mit nextSibling, und mit CSS über den +-Kombinator:
#such_ort+div
Und beim input-Element ist die ID sowieso nützlich, um ein label daran zu koppeln. - Brauchst du das umgebende div wirklich? Eventuell bietet sich da etwas anderes an, vielleicht das zugehörige label. Oder ein fieldset.
- Wenn du die Code-Schnippsel mit html auszeichnest, klappt's auch mit dem Nachb... ähm, mit dem Syntax-Highlighting (bei dir fehlt das 'l').
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--
Disziplin: Teppichboden wiederfinden, wenn man ihn verlegt hat. -
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
divhüllen.const {parentElement} = p; div.appendChild(p); parentElement.appendChild(div);Würden wir dabei so wie oben vorgehen, dann würde das
divund der von ihm eingeschlossene Absatz als letztes Kind vonsectioneinsortiert.<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
divzu 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
replaceWithwerden 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
replaceChildverwendet werden.var parentElement = p.parentElement; parentElement.replaceChild(div, p); div.appendChild(p);Anders als bei
replaceWithwird 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
--
sumpsi - posui - clusi-
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" 1982Destrukturierung 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
-
-
-
