nicht angemeldet
Linuchs
Matthias Scharwies
Rolf B
Linuchs
Robert B.
Der Martin
Linuchs
Der Martin
Samuel fiedler
Linuchs
Robert B.
Linuchs
Linuchs
Moin,
wie heißt die Technik, bei Eingabe in ein Suchfeld Vorschläge zu bekommen?
Ich meine nicht Ajax, das habe ich. Sondern den Druck auf die Runtertaste, um einen der Vorschläge auszuwählen. Meine Vorschläge werden nur am Suchfeld positioniert, haben aber keine logische Verbindung und müssen mit der Maus angeklickt werden, um per JS in das Suchfeld zu kommen.
Beim Studium von ecosia oder google ist das Problem, dass die Vorschläge verschwinden, sobald der Mauszeiger den Vorschlagsbereich verlässt.
Und der Suchbegriff „Auswahlliste, Vorschlagsliste selfhtml“ führt nicht zum Erfolg.
Servus!
Moin,
wie heißt die Technik, bei Eingabe in ein Suchfeld Vorschläge zu bekommen?
Ich meine nicht Ajax, das habe ich. Sondern den Druck auf die Runtertaste, um einen der Vorschläge auszuwählen. Meine Vorschläge werden nur am Suchfeld positioniert, haben aber keine logische Verbindung und müssen mit der Maus angeklickt werden, um per JS in das Suchfeld zu kommen.
Beim Studium von ecosia oder google ist das Problem, dass die Vorschläge verschwinden, sobald der Mauszeiger den Vorschlagsbereich verlässt.
Und der Suchbegriff „Auswahlliste, Vorschlagsliste selfhtml“ führt nicht zum Erfolg.
Habe mal Suchvorschlag + Selfhtml in die Suchmaschine meiner Wahl eingegeben und bin auf diesen Thread aus dem Jahre 2019 gestoßen:
https://forum.selfhtml.org/self/2019/aug/24/inputfeld-mit-parentelement-umhullen/1756404
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
wobei das Suchfeld von Google oder Ecosia kein datalist ist. Das ist ein selbstgemachtes Gadget, das auf Pfeiltasten im Suchfeld reagiert und dementsprechend einen der Vorschläge auswählt und ins Eingabefeld überträgt.
Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…
Rolf
Servus!
Hallo Matthias,
wobei das Suchfeld von Google oder Ecosia kein datalist ist. Das ist ein selbstgemachtes Gadget, das auf Pfeiltasten im Suchfeld reagiert und dementsprechend einen der Vorschläge auswählt und ins Eingabefeld überträgt.
Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…
Das hatten wir 2019 alles schon.
Herzliche Grüße
Matthias Scharwies
Hallo Rolf,
Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…
Trotzdem würde ich hier nicht versuchen Bestehendes zu kopieren, sondern einen klaren HTML5-Aufbau zu planen.
Im 2019er Thread wird das Wort datalist 29x erwähnt, in diesem Thread immerhin schon 45x. Ich glaube, dass das der semantisch richtige Weg ist. Dann bräuchte Linuchs auch keine absoluten Positionierungen und Magic Numbers wie left: 736.233px; auf die der alte Fuxx auf noch stolz ist.
Wie diese Datalist dann aussehen kann, hat ihm @Auge bereits mitgeteilt:
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 passende Struktur.
Gunnar Bittersmann<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>
Linuchs möchte imho das Suchfeld als eierlegende Wollmilchsau[1] - er möchte
option eben aus den Werten mit JS zusammensetzen, aber vor der Suchanfrage.value auslesen und dann die betreffenden Datensätze abrufen und anzeigen.Ich werde bei Gelegenheit das Beispiel im Wiki durch ein komplexeres ergänzen.
Ein Hinweis auf Googles Vorgehensweise hilft hier imho nur wenig - die hatten 2020 135.000 Mitarbeiter, das kann als Einzelkämpfer niemand nachbauen.
Herzliche Grüße
Matthias Scharwies
Zitat: „Ich übernehme per JS vier Werte in vier Felder [land_kz, plz, ortname, ort_id]“ Datalist vermutlich nicht tauglich ↩︎
Habe grad das google-Suchergebnis gefunden: 58 Veranstaltungen in 9 Ländern ↩︎
Den ttf-font würde ich aus der CSS löschen, auch hier https://remso.eu/_text/presse.php erscheinen php-Fehlermeldungen - das sollte unterdrückt oder in einen nicht öffentlichen Bugreport geschickt werden. ↩︎
Hallo Matthias,
ich glaube, du verstehst da was miss.
Eine serverseitig ungefilterte Ortsliste als datalist scheint mir recht umfangreich zu sein.
Die visuelle Hervorhebung des gesuchten Texts ist mit datalist auch nicht möglich. Okay - bei Linuchs ist sie auch noch buggy (suche z.B. nach "Münster Ste" - findet zu viel, und wenn man "Münster Stein" weiterschreibt, ist falsch markiert)
Da ist also durchaus eine Menge Potenzial für eine custom solution und eine Menge Limit bei der datalist.
Rolf
sieht sehr einfach aus, aber funktioniert (noch) nicht. Schau mal auf diese Seite und gib Ortname ein, um die Vorschläge auszulösen.
Habe im Suchfeld type von text auf search geändert und die Zeile list eingefügt:
<p><l>Ortname <img id=such_ort_name class=help /></l>
<input required
type = "search"
list = "OrteVorschlaege"
name = "such_ort_name"
title = "such_ort_name required"
maxlength = 50
value = ""
oninput = "getOrte( this )"
onblur = "getOrteSchliessen()"
/> <i>3 .. 50</i></p>
Das Vorschlagsfeld war bisher ein absolut positioniertes „div“, habe ich in „datalist“ geändert, aber die Runtertaste geht dort nicht hinein:
<datalist id="OrteVorschlaege" style="position: absolute; left: 736.233px; min-width: 25em; top: 1218.15px; min-height: 1em; border: 0.1pt solid rgb(170, 170, 255); border-radius: 5px; background-color: rgb(255, 255, 170); padding: 5px; text-align: left; font-size: 10pt; display: none; z-index: 99;" title="OrteVorschlaege">
<p class="nowrap">D-38871 <a href="javascript:getOrtPut('14081', 'D', '38871', 'Abbenrode' )" title="ort_id=14081"><i class="crot">Abb</i>enrode</a> <small> Gemeinde Nordharz</small></p>
<p class="nowrap">D-93077 <a href="javascript:getOrtPut('12062', 'D', '93077', 'Bad Abbach' )" title="ort_id=12062">Bad <i class="crot">Abb</i>ach</a> <small> </small></p>
<p class="nowrap">D-92507 <a href="javascript:getOrtPut('12006', 'D', '92507', 'Nabburg' )" title="ort_id=12006">N<i class="crot">abb</i>urg</a> <small> </small></p>
<p class="nowrap">D-86986 <a href="javascript:getOrtPut('11386', 'D', '86986', 'Schwabbruck' )" title="ort_id=11386">Schw<i class="crot">abb</i>ruck</a> <small> </small></p>
<p class="nowrap">D-92548 <a href="javascript:getOrtPut('13284', 'D', '92548', 'Schwarzach bei Nabburg' )" title="ort_id=13284">Schwarzach bei N<i class="crot">abb</i>urg</a> <small> </small></p></datalist>
So ganz trivial ist das also nicht.
Moin Linuchs,
sieht sehr einfach aus, aber funktioniert (noch) nicht. Schau mal auf diese Seite und gib Ortname ein, um die Vorschläge auszulösen.
Vorher kurz etwas Anderes: Warum haben deine Eingabefelder für Datum eigentlich den Typ text und nicht date? Und was soll das Attribut [readonly] (sic!)?
Zu deiner Antwort: Die Vorschlagsliste funktioniert nicht, weil dein input eine datalist mit der ID OrteVorschlaege referenziert, während die einzige datalist im Code die ID Vögel hat.
Habe im Suchfeld type von text auf search geändert und die Zeile list eingefügt:
<p><l>Ortname <img id=such_ort_name class=help /></l>
Was ist denn l für ein Element? Mir sind in seinem Code noch mehr Merkwürdigkeiten wie
<i@_feiertag| class=crot@_samstag| class=cdgruen>
aufgefallen.
Das Vorschlagsfeld war bisher ein absolut positioniertes „div“, habe ich in „datalist“ geändert, aber die Runtertaste geht dort nicht hinein:
<datalist id="OrteVorschlaege" style="position: absolute; left: 736.233px; min-width: 25em; top: 1218.15px; min-height: 1em; border: 0.1pt solid rgb(170, 170, 255); border-radius: 5px; background-color: rgb(255, 255, 170); padding: 5px; text-align: left; font-size: 10pt; display: none; z-index: 99;" title="OrteVorschlaege"> <p class="nowrap">D-38871 <a href="javascript:getOrtPut('14081', 'D', '38871', 'Abbenrode' )" title="ort_id=14081"><i class="crot">Abb</i>enrode</a> <small> Gemeinde Nordharz</small></p> <p class="nowrap">D-93077 <a href="javascript:getOrtPut('12062', 'D', '93077', 'Bad Abbach' )" title="ort_id=12062">Bad <i class="crot">Abb</i>ach</a> <small> </small></p> <p class="nowrap">D-92507 <a href="javascript:getOrtPut('12006', 'D', '92507', 'Nabburg' )" title="ort_id=12006">N<i class="crot">abb</i>urg</a> <small> </small></p> <p class="nowrap">D-86986 <a href="javascript:getOrtPut('11386', 'D', '86986', 'Schwabbruck' )" title="ort_id=11386">Schw<i class="crot">abb</i>ruck</a> <small> </small></p> <p class="nowrap">D-92548 <a href="javascript:getOrtPut('13284', 'D', '92548', 'Schwarzach bei Nabburg' )" title="ort_id=13284">Schwarzach bei N<i class="crot">abb</i>urg</a> <small> </small></p></datalist>So ganz trivial ist das also nicht.
Na doch, wenn man einfach der SELFHTML-Referenz von datalist folgt:
<datalist id="OrteVorschlaege">
<option>D-38871 Abbenrode</option>
<option>D-93077 Bad Abbach</option>
<option>D-92507 Nabburg</option>
<option>D-86986 Schwabbruck</option>
<option>D-92548 Schwarzach bei Nabburg</option>
</datalist>
Viele Grüße
Robert
Hallo Robert,
<p><l>Ortname <img id=such_ort_name class=help /></l>Was ist denn
lfür ein Element?
mit solcher subtiler Kritik kommst du bei Linuchs nicht an. Er ist kreativ, und wenn das, was er sich da ausdenkt, irgendwie "funktioniert", bleibt er dabei. Dass er dabei hin un dwieder die Regeln von HTML vergewaltigt, scheint ihm egal zu sein.
Er weigert sich ja auch hartnäckig, Attributwerte in Anführungszeichen zu setzen, wo es (wenn auch empfohlen) nicht zwingend notwendig ist.
Mir sind in seinem Code noch mehr Merkwürdigkeiten wie
<i@_feiertag| class=crot@_samstag| class=cdgruen>aufgefallen.
Ich glaube, das sind irgendwelche mutigen Konstruktionen, über die er mit Javascript herfällt, um doch noch etwas draus zu machen.
<datalist id="OrteVorschlaege" style="position: absolute; left: 736.233px; min-width: 25em; top: 1218.15px; min-height: 1em; border: 0.1pt solid rgb(170, 170, 255); border-radius: 5px; background-color: rgb(255, 255, 170); padding: 5px; text-align: left; font-size: 10pt; display: none; z-index: 99;" title="OrteVorschlaege"> <p class="nowrap">D-38871 <a href="javascript:getOrtPut('14081', 'D', '38871', 'Abbenrode' )" title="ort_id=14081"><i class="crot">Abb</i>enrode</a> <small> Gemeinde Nordharz</small></p> <p class="nowrap">D-93077 <a href="javascript:getOrtPut('12062', 'D', '93077', 'Bad Abbach' )" title="ort_id=12062">Bad <i class="crot">Abb</i>ach</a> <small> </small></p> <p class="nowrap">D-92507 <a href="javascript:getOrtPut('12006', 'D', '92507', 'Nabburg' )" title="ort_id=12006">N<i class="crot">abb</i>urg</a> <small> </small></p> <p class="nowrap">D-86986 <a href="javascript:getOrtPut('11386', 'D', '86986', 'Schwabbruck' )" title="ort_id=11386">Schw<i class="crot">abb</i>ruck</a> <small> </small></p> <p class="nowrap">D-92548 <a href="javascript:getOrtPut('13284', 'D', '92548', 'Schwarzach bei Nabburg' )" title="ort_id=13284">Schwarzach bei N<i class="crot">abb</i>urg</a> <small> </small></p></datalist>
Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.
Immer eine Handbreit Wasser unterm Kiel
Martin
Moin Martin,
Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.
Du glaubst richtig, weshalb ich in meiner Antwort direkt auch die Element-Referenz verlinkt habe. Erlaubt sind reiner Text und option, mehr nicht.
Viele Grüße
Robert
<i@_feiertag| class=crot@_samstag| class=cdgruen>
Da sind Zeilenumbrüche verloren gegangen. @_irgendwas| ist eine Erfindung von mir in der Platzhalter-Datei, ich nenne es „Entscheider“. Entscheidet, ob die Zeile in den per PHP generierten Code eingeht:
> <i\
@_feiertag| class=crot\
@_samstag| class=cdgruen\
> [wochentag] [feiertag]</p>
Das Datum wird eingefärbt, grün für Samstage, rot für Feiertage.
Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.
Oh, die Änderung von <div> auf <datalist> war nicht genug. Mal sehen, wie tief ich da in die Code-Eingeweide einsteigen muss. Da knallt's wahrscheinlich in anderen Programmen, die dieselben Bausteine benutzen.
Ich kann ja mal das p504 aus dem Quasi-Standard rauslösen zum Testen ...
Moin Linuchs,
<i@_feiertag| class=crot@_samstag| class=cdgruen>Da sind Zeilenumbrüche verloren gegangen.
@_irgendwas|ist eine Erfindung von mir in der Platzhalter-Datei, ich nenne es „Entscheider“. Entscheidet, ob die Zeile in den per PHP generierten Code eingeht:
Warum taucht das dann im HTML-Code in meinem Browser auf, wenn das von PHP bearbeitet werden soll?
Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.
Oh, die Änderung von <div> auf <datalist> war nicht genug.
Natürlich nicht und es ist ja nicht so, als seist du schon frühzeitig auf die HTML-Referenz hingewiesen worden.
Mal sehen, wie tief ich da in die Code-Eingeweide einsteigen muss. Da knallt's wahrscheinlich in anderen Programmen, die dieselben Bausteine benutzen.
Das klingt nach einer durchdachten Code-Struktur.
Viele Grüße
Robert
@@Der Martin
Was ist denn
lfür ein Element?mit solcher subtiler Kritik kommst du bei Linuchs nicht an. Er ist kreativ,
Nein.
Wikipedia nennt Kreativität „die Fähigkeit, etwas zu erschaffen, was neu oder originell und dabei nützlich oder brauchbar ist.“
„Neu“ mag auf das, was Linuchs erschafft, noch zutreffen. Aber es ist nicht originell, und schon gar nicht nützlich oder brauchbar.
und wenn das, was er sich da ausdenkt, irgendwie "funktioniert", bleibt er dabei.
Interpunktion kann Sätze retten, in dem Fall die Anführungszeichen (auch wenn’s falsche sind). Was er sich da ausdenkt, funktioniert eben nicht.
Das wurde ihm letztens erst wieder gesagt.
Dass er dabei hin un dwieder die Regeln von HTML vergewaltigt, scheint ihm egal zu sein.
Solange er keinerlei Anstalten erkennen lässt, wenigstens die Grundlagen richtig zu machen, sollten uns hier seine Fragen im Forum egal sein. Einfach ignorieren – so wie er die Antworten ignoriert.
Er sollte Shantys singen, aber von Webentwicklung die Finger lassen.
Er weigert sich ja auch hartnäckig, Attributwerte in Anführungszeichen zu setzen, wo es (wenn auch empfohlen) nicht zwingend notwendig ist.
Was keinerlei Auswirkung auf Nutzer* hat. Im Gegensatz zu fehlenden Labels bei Eingabefeldern.
😷 LLAP
Hallo Gunnar,
Was ist denn
lfür ein Element?mit solcher subtiler Kritik kommst du bei Linuchs nicht an. Er ist kreativ,
Nein.
Wikipedia nennt Kreativität „die Fähigkeit, etwas zu erschaffen, was neu oder originell und dabei nützlich oder brauchbar ist.“
du hast zu früh aufgehört zu lesen. Ein Stückchen weiter unten heißt es:
Das Adjektiv kreativ wird in Wortkombinationen auch als Euphemismus gebraucht, um das Ausreizen und auch Verletzen von Regeln zu umschreiben, etwa bei kreative Buchführung.
Immer eine Handbreit Wasser unterm Kiel
Martin
Warum haben deine Eingabefelder für Datum eigentlich den Typ text und nicht date?
Ich weiß nicht, ob es 2008 den typ date schon gab. Damals habe ich viel von Hand gemacht, z.B. die abgerundeten Ecken. Meine Text-Lösung lässt vereinfachte Eingaben zu. Klicke mal mutig auf das i-Symbol, da wird's erklärt.
Und was soll das Attribut [readonly]
Oh, Programmierfehler. Der Platzhalter [readonly] ist durch nichts ('') zu ersetzen im Eingabe-Modus und durch 'readonly' im Lösch-Modus, damit die Daten vor dem endgültigen Löschen kontrolliert, aber nicht geändert werden können.
Die Vorschlagsliste funktioniert nicht, weil
Das ist nicht der Grund. Habe die Vögelei dort testweise eingesetzt, weil man sie bei selfHTML nicht life erleben kann.
Die Datalist OrteVorschlaege wird per JS gesetzt und ist damit per [Strg][U] nicht sichtbar. Der Grund ist, dass das Suchen von Orten in zahlreichen Programmen vorkommt und ich nur diese eine Stelle dafür benötige, statt in jedem Programm HTML. Beim Ändern wird dann ganz bestimmt was übersehen.
/* ***********************************************************************************
*
* Vorschlagsbereich div fuer name = "such_ort_name" definieren und in DOM einhaengen
*
* *********************************************************************************** */
window.addEventListener('DOMContentLoaded', function () {
//function getOrteNewDiv() {
// Vorschlagsfeld kreiren
//var newDiv = document.createElement("div");
var newDiv = document.createElement("datalist");
newDiv.id = "OrteVorschlaege";
newDiv.style.position = "absolute";
newDiv.style.left = "5px";
newDiv.style.minWidth = "25em";
newDiv.style.top = "16pt";
newDiv.style.minHeight = "1em";
newDiv.style.border = ".1pt solid #aaf";
newDiv.style.borderRadius = "5px";
//newDiv.style.backgroundColor = "rgba( 255,255,196,.5)";
newDiv.style.backgroundColor = "#ffa";
newDiv.style.padding = "5px";
newDiv.style.textAlign = "left";
newDiv.style.fontSize = "10pt";
newDiv.style.display = "none";
newDiv.style.zIndex = "99";
newDiv.title = "OrteVorschlaege";
newDiv.innerHTML = "OrteVorschlaege";
// Vorschlagsfeld hinter <body> einhaengen
var erster = document.getElementsByTagName( "body" )[0].firstChild;
document.body.insertBefore( newDiv, erster );
console.log( "ajax/getOrte.js: Feld id='OrteVorschlaege' eingehaengt" );
// Zeiger auf das Vorschlagsfeld setzen
getOrteVar.obj_vorschlaege = newDiv;
});
Was ist denn l für ein Element?
Erzeugt bei breiten Viewports sowas:
und bei schmalen sowas:
Viele meiner „Seltsamkeiten“ sind der Kompatibilität zu alten Standards vor 2008 geschuldet. Bei ca. 150 Programmen und ungezählten includes wäre ich nur noch mit Änderungen beschäftigt, wenn ich alle Neuerungen nachziehen würde.
Hallo,
Viele meiner „Seltsamkeiten“ sind der Kompatibilität zu alten Standards vor 2008 geschuldet.
viele deiner Seltsamkeiten waren noch nie richtig (lies: regelkonform). Auch 2008 nicht.
Bei ca. 150 Programmen und ungezählten includes wäre ich nur noch mit Änderungen beschäftigt, wenn ich alle Neuerungen nachziehen würde.
Das schreit nach Modularisierung und wiederverwendbarem Code. Aber es geht ja gar nicht um das Nachziehen von Neuerungen aufgrund neuer Standards. Was 2008 regelkonform war, ist zum Großteil auch heute noch korrekt (wenn auch nicht immer zeitgemäß). Aber irgendwelche Syntaxkonstrukte erfinden, die von keinem Standard abgedeckt sind, war noch nie eine gute Idee. Sie "funktioniert" in deinem Fall in Teilen, weil HTML 5 auch eine Fehlertoleranz der Browser fordert und konkret definiert.
Richtig wird es davon aber nicht.
Immer eine Handbreit Wasser unterm Kiel
Martin
Hallo Linuchs!
Was ist denn l für ein Element?
Erzeugt bei breiten Viewports sowas:
und bei schmalen sowas:
Steht in keinem HTML Standard drin.
Auch nicht unter “obsolete Elemente“, falls man das sieht.
Falls du andere Quellen hast, entschuldige ich mich für diese Kritik.
Screenshot: 
.
Ein weiteres Problem ist, dass das Element gar nicht wirkt (Seitenquelltext ist ohne Leerzeichen, da sonst einfach dort umgebrochen werden würde):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>TEST</title>
</head>
<body>
<b>TESTTESTTESTTESTTESTTESTTEST</b><l><i>TESTTESTTESTTESTTESTTESTTEST</i></l><u>TESTTESTTESTTESTTESTTESTTEST</u>
</body>
</html>
Screenshot bei kleinem Bildschirm:
Au revoir,
Samuel Fiedler
Falls du andere Quellen hast, entschuldige ich mich für diese Kritik.
Gehört überhaupt nicht zum Thema und wurde 2019 diskutiert.
Moin Linuchs,
Die Vorschlagsliste funktioniert nicht, weil
Das ist nicht der Grund. Habe die Vögelei dort testweise eingesetzt, weil man sie bei selfHTML nicht life erleben kann.
Ja, sie funktioniert aber nur, wenn du sie auch verwendest.
Du kannst das SELFHTML-Beispiel auch lokal ausprobieren.
Die Datalist OrteVorschlaege wird per JS gesetzt und ist damit per [Strg][U] nicht sichtbar.
Im Code-Inspektor der „F12-Developer-Tools“ aber schon 😉
Der Grund ist, dass das Suchen von Orten in zahlreichen Programmen vorkommt und ich nur diese eine Stelle dafür benötige, statt in jedem Programm HTML. Beim Ändern wird dann ganz bestimmt was übersehen.
Du kannst deine Datenquelle doch in verschiedenen Arten (sprich Formaten) exponieren.
var newDiv = document.createElement("datalist"); newDiv.id = "OrteVorschlaege";
Alles danach brauchst du nicht, weil datalist kein sichtbares Element ist.
Was ist denn l für ein Element?
Erzeugt bei breiten Viewports sowas:
und bei schmalen sowas:
Das geht doch auch standardkonform mit span oder label und CSS.
Viele meiner „Seltsamkeiten“ sind der Kompatibilität zu alten Standards vor 2008 geschuldet.
Welchen „Standards“ sollen das (gewesen) sein?
Bei ca. 150 Programmen und ungezählten includes wäre ich nur noch mit Änderungen beschäftigt, wenn ich alle Neuerungen nachziehen würde.
Ach ja, im Nachhinein zeichnet es sich immer aus, wenn man sich vorher eine sinnvolle (lies: wartbare) Projektstruktur überlegt hat …
Viele Grüße
Robert
aus dem Jahre 2019
Sorry, habe das damals zurückgestellt, weil es eben nicht so einfach war.
Erzeuge input, label und datalist zusammen
Ich nutze das Vorschlagsfeld (jetzt datalist) sowohl für das Postcode- als auch das Ortsname-Feld.
oninput = "getOrte( this )"
Ist die Umhüllung mit „label“ das Entscheidende und kann man die datalist während des Tippens tauschen?
<label>
Vogelart
<input type="search" list="Vögel">
<datalist id="Vögel">
<option value="Amsel">
...
</datalist>
</label>
Moin Linuchs,
Erzeuge input, label und datalist zusammen
Ich nutze das Vorschlagsfeld (jetzt datalist) sowohl für das Postcode- als auch das Ortsname-Feld.
oninput = "getOrte( this )"
Wofür brauchst du den Eventhandler?
Ist die Umhüllung mit „label“ das Entscheidende und kann man die datalist während des Tippens tauschen?
label hat damit nichts zu tun, soweit ich das sehe, sondern die datalist muss einfach korrekt referenziert werden.
Aber wofür möchtest du die datalist beim Tippen tauschen?
Viele Grüße
Robert
Hallo Robert,
erstmal danke fürs Mitdenken.
Aber wofür möchtest du die datalist beim Tippen tauschen?
Ganz normal bei Suchmaschinen. Sie ändert sich mit jedem getippten Zeichen.
...
Servus!
Hallo Robert,
erstmal danke fürs Mitdenken.
Aber wofür möchtest du die datalist beim Tippen tauschen?
Ganz normal bei Suchmaschinen. Sie ändert sich mit jedem getippten Zeichen.
Ich muss jetzt doch noch mal antworten:
Ich habe die auf die Element-Referenz geleitet. Die hatte immer schon (seit ca. 2012) keine Live-Beispiele.
Dort ist aber unter "Siehe auch" dieses Tutorial mit einem Live-Beispiel verlinkt: HTML/Tutorials/Formulare/Suchformulare#Suchvorschläge
Gib dort bitte mal "unt" ein → dann kommt eben auch der Buntspecht raus. Bei "ei" die Meise und der Eisvogel. Da benötigst du kein JavaScript oder AjaX.
Pro-Tipp: Verwende gültiges und semantisches HTML. Dann sparst Du dir manche Krücke, die du jetzt mit JS, PHP und Voodoo nur unzureichend erzielst.
Das gleiche gilt für das l-Element, bei dem dich @Gunnar Bittersmann schon wiederholt auf die mangelnde Zugänglichkeit hingewiesen hat. Es geht eben um ein label, eine Beschreibung für die Eingabe.
Der Abschuss ist dein inline-Style:
<datalist id="OrteVorschlaege"
style="position: absolute;
left: 736.233px; min-width: 25em;
top: 1218.15px; min-height: 1em;
border: 0.1pt solid rgb(170, 170, 255);
border-radius: 5px; background-color: rgb(255, 255, 170);
padding: 5px; text-align: left;
font-size: 10pt;
display: none; z-index: 99;"
title="OrteVorschlaege">
Wer macht denn sowas?
Für sowas würde dich jeder ordentliche Kapitän kielholen!
Herzliche Grüße
Matthias Scharwies
Da benötigst du kein JavaScript oder AjaX.
Bei 10 Vögeleien sicher nicht. Aber würdest du 15.000 Orte im Dokument mitliefern? Ist doch absurd.
Für sowas würde dich jeder ordentliche Kapitän kielholen!
left: 736.233px;
top: 1218.15px;
Da habe ich die links oben Position des input-Feldes (obj) abgefragt, um die Vorschlagsliste darunter zu positionieren. Wenn Firefox tausendstel Pixel meldet, ...
// 2020-10-12 https://forum.selfhtml.org/self/2020/oct/12/freies-hilfsfeld-beim-tippen-andocken-left-und-top-finden/1776483#m1776483
let box = obj.getBoundingClientRect();
//console.log( "obj.left=[" +box.left +"] top=[" +box.top +"]" );
getOrteVar.obj_vorschlaege.style.left = box.left + pageXOffset +10 +"px";
getOrteVar.obj_vorschlaege.style.top = box.top + pageYOffset +obj.offsetHeight +"px";
Moin Linuchs,
Bei 10 Vögeleien sicher nicht. Aber würdest du 15.000 Orte im Dokument mitliefern? Ist doch absurd.
Außer im veralteten Internet Explorer funktioniert das aber.
Viele Grüße
Robert
Hallo Linuchs!
Da benötigst du kein JavaScript oder AjaX.
Bei 10 Vögeleien sicher nicht. Aber würdest du 15.000 Orte im Dokument mitliefern? Ist doch absurd.
Genau!
Eine Option allein (mit Inhalt “Hamburg“) ist gute 35 Bytes lang. Plus Einrückung käme das auf geschätzte 40 Bytes.
40 Bytes * 15000 Optionen = 600000 Bytes = 600 KB.
Ernsthaft?
Naja, man kann sie ja einmal deklarieren und oft nutzen, aber wer nutzt allein 600 KB für die Städte?
Da tun mir jetzt schon die Entwickler leid, die das im Seitenquelltext untersuchen wollen.
Für sowas würde dich jeder ordentliche Kapitän kielholen!
Ja, würde. Aber nicht wird.
Kielholen würde ein halbwegs ordentlicher Kapitän ihn eher für direkt ausgelieferte 600 KB für die Städte.
Da habe ich die links oben Position des input-Feldes (obj) abgefragt, um die Vorschlagsliste darunter zu positionieren. Wenn Firefox tausendstel Pixel meldet,
wäre die Positionierung mit JavaScript nicht nur pixelgenau, sondern subpixelgenau 😉.
Das wäre also für jeden ordentlichen (bzw. genauen) Kapitän geeignet!
Ich weiß, ordentlich ≠ genau, aber wer genau arbeitet, dessen Arbeiten sind auch halbwegs ordentlich.
Au revoir,
Samuel Fiedler
Moin Linuchs,
Aber wofür möchtest du die datalist beim Tippen tauschen?
Ganz normal bei Suchmaschinen. Sie ändert sich mit jedem getippten Zeichen.
Ähm, das macht die Datalist ganz ohne JavaScript. Alle ihre option-Kinder stehen für Vorschläge zur Verfügung.
Viele Grüße
Robert
Hallo Linuchs!
Ich schreibe jetzt noch mal etwas zu datalist:
Man definiert eine datalist mit <datalist id="ID">.
Wenn man sie nutzen möchte, kann man <input type="text" list="ID"/> nutzen.
Bisher sieht unser Beispiel so aus:
<input type="text" list="TEST"/>
<datalist id="TEST">
</datalist>
Dann können wir Optionen hinzufügen. Das tun wir mit <option>TEXT</option>.
Dabei ist TEXT der Text, der vorgeschlagen werden soll.
Erhält das option-Element kein value-Attribut, wird einfach der Text ins Inputfeld geschrieben, der als Text in der Option stand.
Wenn das option-Element jedoch ein value-Attribut enthält, wird der Text ins Inputfeld geschrieben, der im Value-Attribut steht.
Warum machst du eigentlich “nur“ Autovervollständigung, wenn du eigentlich eine Auswahlliste haben möchtest?
Nun ja, es ist deine Entscheidung, ob du datalist, Auswahllisten oder Ajax verwenden möchtest.
Au revoir,
Samuel Fiedler
Falls es JavaScript-ähnliche Technologien im Bereich den Clients gibt. ↩︎
Hallo Samuel,
wenn Du doch selbst schreibst, dass eine datalist für den genannten Zweck viel zu groß im Quelltext ist (und es bleibt nicht bei 35 Bytes, wenn da mehr als nur ein Feld mit initialisiert werden soll) - wieso dienst Du sie Linuchs dann immer noch an?
Was hier getrieben wird, ist Selfhtml at its worst - wir setzen die Scheuklappen auf, zitieren Dogmen und ignorieren das, was der Fragesteller möchte, komplett. Manchmal ist das sinnvoll, nämlich dann, wenn sich jemand ein völlig unsinniges UI ausgedacht hat. Das trifft auf Linuchs' Auswahlliste aber nicht zu.
Ich sehe es nicht, wie Linuchs mit einer datalist seine ajaxgetriebene Suche realisieren könnte. Eine Datalist ist viel zu restriktiv. Nicht nur wegen des Stylings, nicht nur wegen der Zusatzinformationen, sondern auch auf Grund der Tatsache, dass der Feldinhalt des Eingabefeldes 1:1 in der Datalist vorkommen muss.
Suche auf remso.eu man "Münster Stein" - da bekommst Du bspw. Bad Münster am Stein angeboten. Eine Datalist würde das ausblenden.
Vermutlich ist Linuchs bereits mit einem keypress-Handler und ein paar Links im Dropdown geholfen. Ich hab nur keine Zeit, das "mal eben" in einem Fiddle zu programmieren.
Rolf
Servus!
Hallo Samuel,
wenn Du doch selbst schreibst, dass eine datalist für den genannten Zweck viel zu groß im Quelltext ist (und es bleibt nicht bei 35 Bytes, wenn da mehr als nur ein Feld mit initialisiert werden soll) - wieso dienst Du sie Linuchs dann immer noch an?
Was hier getrieben wird, ist Selfhtml at its worst - wir setzen die Scheuklappen auf, zitieren Dogmen und ignorieren das, was der Fragesteller möchte, komplett. Manchmal ist das sinnvoll, nämlich dann, wenn sich jemand ein völlig unsinniges UI ausgedacht hat.
Wie gesagt:
Und schon hätte sich das ganze angeblich nötige AjaX-Gedöns erledigt.
Das trifft auf Linuchs' Auswahlliste aber nicht zu.
Das glaub ich schon. Ich hatte trotz der vielen Möglichkeiten Probleme die Umkreissuche dann wirklich zu starten.
Ebay-Kleinanzeigen sucht erstmal los und dann kann man die km weiter einstellen. Das ist bei Linuchs etwas unkonventionell gelöst.
Herzliche Grüße
Matthias Scharwies
Wenn bei datalist nur ein Wert übernommen werden kann
<option value="Buntspecht">
taugt das nicht. Ich übernehme per JS vier Werte in vier Felder
auch mozilla.org beschreibt das so.