Vorschläge bei Eingabe ins Suchfeld – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 15:56:48 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795683?srt=yes#m1795683 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795683?srt=yes#m1795683 <p>Moin,</p> <p>wie heißt die Technik, bei Eingabe in ein Suchfeld Vorschläge zu bekommen?</p> <p>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.</p> <p>Beim Studium von ecosia oder google ist das Problem, dass die Vorschläge verschwinden, sobald der Mauszeiger den Vorschlagsbereich verlässt.</p> <p>Und der Suchbegriff „Auswahlliste, Vorschlagsliste selfhtml“ führt nicht zum Erfolg.</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 15:59:58 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795684?srt=yes#m1795684 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795684?srt=yes#m1795684 <p>Servus!</p> <blockquote> <p>Moin,</p> <p>wie heißt die Technik, bei Eingabe in ein Suchfeld Vorschläge zu bekommen?</p> </blockquote> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/datalist" rel="nofollow noopener noreferrer">HTML/Elemente/datalist</a></p> <blockquote> <p>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.</p> <p>Beim Studium von ecosia oder google ist das Problem, dass die Vorschläge verschwinden, sobald der Mauszeiger den Vorschlagsbereich verlässt.</p> <p>Und der Suchbegriff „Auswahlliste, Vorschlagsliste selfhtml“ führt nicht zum Erfolg.</p> </blockquote> <p>Habe mal Suchvorschlag + Selfhtml in die Suchmaschine meiner Wahl eingegeben und bin auf diesen Thread aus dem Jahre 2019 gestoßen:</p> <p><a href="https://forum.selfhtml.org/self/2019/aug/24/inputfeld-mit-parentelement-umhullen/1756404" rel="noopener noreferrer">https://forum.selfhtml.org/self/2019/aug/24/inputfeld-mit-parentelement-umhullen/1756404</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Datalist vermutlich nicht tauglich Tue, 25 Jan 22 19:49:51 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795699?srt=yes#m1795699 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795699?srt=yes#m1795699 <p>Wenn bei datalist nur ein Wert übernommen werden kann</p> <p><code><option value="Buntspecht"></code></p> <p>taugt das nicht. Ich übernehme per JS vier Werte in vier Felder</p> <ul> <li>land_kz</li> <li>plz</li> <li>ortname</li> <li>ort_id</li> </ul> <p>auch mozilla.org beschreibt das so.</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 16:10:14 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795685?srt=yes#m1795685 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795685?srt=yes#m1795685 <p>Hallo Matthias,</p> <p>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.</p> <p>Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 16:35:09 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795687?srt=yes#m1795687 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795687?srt=yes#m1795687 <p>sieht sehr einfach aus, aber funktioniert (noch) nicht. Schau mal auf <a href="https://remso.eu/?zp=p504" rel="nofollow noopener noreferrer">diese Seite</a> und gib Ortname ein, um die Vorschläge auszulösen.</p> <p>Habe im Suchfeld type von text auf search geändert und die Zeile list eingefügt:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>l</span><span class="token punctuation">></span></span>Ortname <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>such_ort_name</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>help</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>l</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">required</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">list</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>such_ort_name<span class="token punctuation">"</span></span> <span class="token attr-name">title</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>such_ort_name required<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> 50</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">oninput</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>getOrte( this )<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onblur</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">getOrteSchliessen</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>3 .. 50<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>Das Vorschlagsfeld war bisher ein absolut positioniertes „div“, habe ich in „datalist“ geändert, aber die Runtertaste geht dort nicht hinein:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 736.233px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1218.15px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0.1pt solid <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 10pt<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-38871 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('14081', 'D', '38871', 'Abbenrode' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=14081<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>enrode<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> Gemeinde Nordharz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-93077 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('12062', 'D', '93077', 'Bad Abbach' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=12062<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bad <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>ach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-92507 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('12006', 'D', '92507', 'Nabburg' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=12006<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>urg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-86986 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('11386', 'D', '86986', 'Schwabbruck' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=11386<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schw<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>ruck<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-92548 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('13284', 'D', '92548', 'Schwarzach bei Nabburg' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=13284<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schwarzach bei N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>urg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p>So ganz trivial ist das also nicht.</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 16:46:18 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795688?srt=yes#m1795688 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795688?srt=yes#m1795688 <blockquote> <p>aus dem Jahre 2019</p> </blockquote> <p>Sorry, habe das damals zurückgestellt, weil es eben nicht so einfach war.</p> <blockquote> <p>Erzeuge input, label und datalist zusammen</p> </blockquote> <p>Ich nutze das Vorschlagsfeld (jetzt datalist) sowohl für das Postcode- als auch das Ortsname-Feld.</p> <pre><code class="block language-html">oninput = "getOrte( this )" </code></pre> <p>Ist die Umhüllung mit „label“ das Entscheidende und kann man die datalist während des Tippens tauschen?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> Vogelart <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Vögel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Vögel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Amsel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 16:11:10 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795686?srt=yes#m1795686 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795686?srt=yes#m1795686 <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>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.</p> <p>Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…</p> </blockquote> <p>Das hatten wir 2019 alles schon.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> HTML5: Suchvorschläge mit datalist Wed, 26 Jan 22 05:01:55 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795708?srt=yes#m1795708 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795708?srt=yes#m1795708 <p>Hallo Rolf,</p> <blockquote> <p>Ich nehme an, dass ein bedienbares Suchfeld nicht ganz trivial ist und über eine einfache Reaktion auf Pfeiltasten hinausgeht…</p> </blockquote> <p>Trotzdem würde ich hier nicht versuchen Bestehendes zu kopieren, sondern einen klaren HTML5-Aufbau zu planen.</p> <p>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 <code>left: 736.233px;</code> auf die der alte Fuxx auf noch stolz ist.</p> <p>Wie diese Datalist dann aussehen kann, hat ihm <a href="/users/15" class="mention registered-user" rel="noopener noreferrer">@Auge</a> bereits <a href="https://forum.selfhtml.org/self/2019/aug/24/inputfeld-mit-parentelement-umhullen/1757078#m1757078" rel="noopener noreferrer">mitgeteilt</a>:</p> <blockquote> <p>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.</p> </blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>such_ort_vorschlaege<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>73<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Čelákovice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9421<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ascoli Piceno<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>389<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Barcelona<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1278<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>29221 Celle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1279<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>29223 Celle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1277<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>29225 Celle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1280<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>29227 Celle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1276<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>29229 Celle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>44<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delfzijl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>837<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Gloucester<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p>Linuchs möchte imho das Suchfeld als eierlegende Wollmilchsau<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> - er möchte</p> <ul> <li>ca. 100/1000 geplante Veranstaltungen zeigen <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></li> <li>nach <strong>allen</strong> 15.000 Postleitzahlen suchen</li> <li>und eine Umkreissuche anbieten</li> </ul> <ol> <li>Ich weiß gar nicht, ob das sinnvoll ist nach "83471 Berchtesgaden" suchen zu können und dann zu erfahren, dass es dort keine Seemannschöre gibt. Deshalb würden bei mir in der datalist nur Orte, in denen Veranstaltungen geplant sind, angezeigt werden. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></li> </ol> <p><a href="/images/e7bb6cee-7e71-11ec-b26c-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/e7bb6cee-7e71-11ec-b26c-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <ol start="2"> <li>Ich würde das trennen <ul> <li>und den Text-Inhalt von <code>option</code> eben aus den Werten mit JS zusammensetzen, aber <strong>vor</strong> der Suchanfrage.</li> <li>Wenn ein Suchvorschlag ausgewählt wurde, kann man den <code>value</code> auslesen und dann die betreffenden Datensätze abrufen und anzeigen.</li> <li>Die Umkreissuche wird bei (fast) allen Firmen in einem eigenen Eingabefeld nur mit PLZ durchgeführt - dann muss man die doppelt vorhandenen Namen auch nicht ausschließen.</li> </ul> </li> </ol> <p>Ich werde bei Gelegenheit das Beispiel im Wiki durch ein komplexeres ergänzen.</p> <hr> <p>Ein Hinweis auf Googles Vorgehensweise hilft hier imho nur wenig - die hatten 2020 135.000 Mitarbeiter, das kann als Einzelkämpfer niemand nachbauen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Zitat: „Ich übernehme per JS vier Werte in vier Felder [land_kz, plz, ortname, ort_id]“ <a href="https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795699#m1795699" rel="noopener noreferrer">Datalist vermutlich nicht tauglich</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Habe grad das google-Suchergebnis gefunden: 58 Veranstaltungen in 9 Ländern <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>Den ttf-font würde ich aus der CSS löschen, auch hier <a href="https://remso.eu/_text/presse.php" rel="nofollow noopener noreferrer">https://remso.eu/_text/presse.php</a> erscheinen php-Fehlermeldungen - das sollte unterdrückt oder in einen nicht öffentlichen Bugreport geschickt werden. <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 17:45:54 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795689?srt=yes#m1795689 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795689?srt=yes#m1795689 <p>Moin Linuchs,</p> <blockquote> <p>sieht sehr einfach aus, aber funktioniert (noch) nicht. Schau mal auf <a href="https://remso.eu/?zp=p504" rel="nofollow noopener noreferrer">diese Seite</a> und gib Ortname ein, um die Vorschläge auszulösen.</p> </blockquote> <p>Vorher kurz etwas Anderes: Warum haben deine Eingabefelder für Datum eigentlich den Typ <code>text</code> und nicht <code>date</code>? Und was soll das Attribut <code>[readonly]</code> (sic!)?</p> <p>Zu deiner Antwort: Die Vorschlagsliste funktioniert nicht, weil dein <code>input</code> eine <code>datalist</code> mit der ID <em>OrteVorschlaege</em> referenziert, während die einzige <code>datalist</code> im Code die ID <em>Vögel</em> hat.</p> <blockquote> <p>Habe im Suchfeld type von text auf search geändert und die Zeile list eingefügt:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>l</span><span class="token punctuation">></span></span>Ortname <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>such_ort_name</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>help</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>l</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Was ist denn <code>l</code> für ein Element? Mir sind in seinem Code noch mehr Merkwürdigkeiten wie</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i@_feiertag|</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>crot@_samstag|</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>cdgruen</span><span class="token punctuation">></span></span> </code></pre> <p>aufgefallen.</p> <blockquote> <p>Das Vorschlagsfeld war bisher ein absolut positioniertes „div“, habe ich in „datalist“ geändert, aber die Runtertaste geht dort nicht hinein:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 736.233px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1218.15px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0.1pt solid <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 10pt<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-38871 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('14081', 'D', '38871', 'Abbenrode' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=14081<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>enrode<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> Gemeinde Nordharz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-93077 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('12062', 'D', '93077', 'Bad Abbach' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=12062<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bad <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>ach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-92507 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('12006', 'D', '92507', 'Nabburg' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=12006<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>urg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-86986 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('11386', 'D', '86986', 'Schwabbruck' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=11386<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schw<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>ruck<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-92548 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('13284', 'D', '92548', 'Schwarzach bei Nabburg' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=13284<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schwarzach bei N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>urg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p>So ganz trivial ist das also nicht.</p> </blockquote> <p>Na doch, wenn man einfach der <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/datalist" rel="nofollow noopener noreferrer">SELFHTML-Referenz von <code>datalist</code></a> folgt:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>D-38871 Abbenrode<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>D-93077 Bad Abbach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>D-92507 Nabburg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>D-86986 Schwabbruck<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>D-92548 Schwarzach bei Nabburg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 17:51:07 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795690?srt=yes#m1795690 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795690?srt=yes#m1795690 <p>Moin Linuchs,</p> <blockquote> <blockquote> <p>Erzeuge input, label und datalist zusammen</p> </blockquote> <p>Ich nutze das Vorschlagsfeld (jetzt datalist) sowohl für das Postcode- als auch das Ortsname-Feld.</p> <pre><code class="block language-html">oninput = "getOrte( this )" </code></pre> </blockquote> <p>Wofür brauchst du den Eventhandler?</p> <blockquote> <p>Ist die Umhüllung mit „label“ das Entscheidende und kann man die datalist während des Tippens tauschen?</p> </blockquote> <p><code>label</code> hat damit nichts zu tun, soweit ich das sehe, sondern die <code>datalist</code> muss einfach korrekt referenziert werden.</p> <p>Aber wofür möchtest du die <code>datalist</code> beim Tippen tauschen?</p> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 18:26:54 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795691?srt=yes#m1795691 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795691?srt=yes#m1795691 <p>Hallo Robert,</p> <blockquote> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>l</span><span class="token punctuation">></span></span>Ortname <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>such_ort_name</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>help</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>l</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Was ist denn <code>l</code> für ein Element?</p> </blockquote> <p>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.</p> <p>Er weigert sich ja auch hartnäckig, Attributwerte in Anführungszeichen zu setzen, wo es (wenn auch empfohlen) nicht zwingend notwendig ist.</p> <blockquote> <p>Mir sind in seinem Code noch mehr Merkwürdigkeiten wie</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i@_feiertag|</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>crot@_samstag|</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>cdgruen</span><span class="token punctuation">></span></span> </code></pre> <p>aufgefallen.</p> </blockquote> <p>Ich glaube, das sind irgendwelche mutigen Konstruktionen, über die er mit Javascript herfällt, um doch noch etwas draus zu machen.</p> <blockquote> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 736.233px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1218.15px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0.1pt solid <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 10pt<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-38871 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('14081', 'D', '38871', 'Abbenrode' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=14081<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>enrode<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> Gemeinde Nordharz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-93077 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('12062', 'D', '93077', 'Bad Abbach' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=12062<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bad <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>ach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-92507 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('12006', 'D', '92507', 'Nabburg' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=12006<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>urg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-86986 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('11386', 'D', '86986', 'Schwabbruck' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=11386<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schw<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>ruck<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nowrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D-92548 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:getOrtPut('13284', 'D', '92548', 'Schwarzach bei Nabburg' )<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ort_id=13284<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schwarzach bei N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>abb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>urg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> </blockquote> </blockquote> <p>Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.</p> <p>Immer eine Handbreit Wasser unterm Kiel<br>  Martin</p> <div class="signature">-- <br> Wenn ich den See seh, brauch ich kein Meer mehr. </div> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 18:35:49 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795693?srt=yes#m1795693 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795693?srt=yes#m1795693 <blockquote> <p>Warum haben deine Eingabefelder für Datum eigentlich den Typ text und nicht date?</p> </blockquote> <p>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.</p> <blockquote> <p>Und was soll das Attribut [readonly]</p> </blockquote> <p>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.</p> <blockquote> <p>Die Vorschlagsliste funktioniert nicht, weil</p> </blockquote> <p>Das ist nicht der Grund. Habe die Vögelei dort testweise eingesetzt, weil man sie bei selfHTML nicht life erleben kann.</p> <p>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.</p> <pre><code class="block language-js"><span class="token comment">/* *********************************************************************************** * * Vorschlagsbereich div fuer name = "such_ort_name" definieren und in DOM einhaengen * * *********************************************************************************** */</span> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//function getOrteNewDiv() {</span> <span class="token comment">// Vorschlagsfeld kreiren</span> <span class="token comment">//var newDiv = document.createElement("div");</span> <span class="token keyword">var</span> newDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"datalist"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">"OrteVorschlaege"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">"absolute"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token string">"5px"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>minWidth <span class="token operator">=</span> <span class="token string">"25em"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token string">"16pt"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>minHeight <span class="token operator">=</span> <span class="token string">"1em"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>border <span class="token operator">=</span> <span class="token string">".1pt solid #aaf"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>borderRadius <span class="token operator">=</span> <span class="token string">"5px"</span><span class="token punctuation">;</span> <span class="token comment">//newDiv.style.backgroundColor = "rgba( 255,255,196,.5)";</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">"#ffa"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>padding <span class="token operator">=</span> <span class="token string">"5px"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>textAlign <span class="token operator">=</span> <span class="token string">"left"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token string">"10pt"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>zIndex <span class="token operator">=</span> <span class="token string">"99"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">"OrteVorschlaege"</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"OrteVorschlaege"</span><span class="token punctuation">;</span> <span class="token comment">// Vorschlagsfeld hinter <body> einhaengen</span> <span class="token keyword">var</span> erster <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span> <span class="token string">"body"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span> newDiv<span class="token punctuation">,</span> erster <span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"ajax/getOrte.js: Feld id='OrteVorschlaege' eingehaengt"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Zeiger auf das Vorschlagsfeld setzen</span> getOrteVar<span class="token punctuation">.</span>obj_vorschlaege <span class="token operator">=</span> newDiv<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <blockquote> <p>Was ist denn l für ein Element?</p> </blockquote> <p>Erzeugt bei breiten Viewports sowas:</p> <p><a href="/images/2f861ba6-7e0d-11ec-86f5-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/2f861ba6-7e0d-11ec-86f5-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>und bei schmalen sowas:</p> <p><a href="/images/46f27d0c-7e0d-11ec-ad72-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/46f27d0c-7e0d-11ec-ad72-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>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.</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 19:13:36 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795696?srt=yes#m1795696 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795696?srt=yes#m1795696 <p>Hallo Robert,</p> <p>erstmal danke fürs Mitdenken.</p> <blockquote> <p>Aber wofür möchtest du die datalist beim Tippen tauschen?</p> </blockquote> <p>Ganz normal bei Suchmaschinen. Sie ändert sich mit jedem getippten Zeichen.</p> <p><a href="/images/b6be8b44-7e12-11ec-8c44-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/b6be8b44-7e12-11ec-8c44-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>...</p> <p><a href="/images/c4e251d8-7e12-11ec-aa5f-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/c4e251d8-7e12-11ec-aa5f-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 18:32:20 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795692?srt=yes#m1795692 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795692?srt=yes#m1795692 <p>Moin Martin,</p> <blockquote> <p>Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.</p> </blockquote> <p>Du glaubst richtig, weshalb ich in meiner Antwort direkt auch die Element-Referenz verlinkt habe. Erlaubt sind reiner Text und <code>option</code>, mehr nicht.</p> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 18:59:26 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795694?srt=yes#m1795694 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795694?srt=yes#m1795694 <blockquote> <p><code><i@_feiertag| class=crot@_samstag| class=cdgruen></code></p> </blockquote> <p>Da sind Zeilenumbrüche verloren gegangen. <code>@_irgendwas|</code> ist eine Erfindung von mir in der Platzhalter-Datei, ich nenne es „Entscheider“. Entscheidet, ob die Zeile in den per PHP generierten Code eingeht:</p> <pre><code class="block language-html"> > <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i\</span> <span class="token attr-name">@_feiertag|</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>crot\</span> <span class="token attr-name">@_samstag|</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>cdgruen\</span> <span class="token punctuation">></span></span> [wochentag] <span class="token entity named-entity" title="&nbsp;">&nbsp;</span> [feiertag]<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>Das Datum wird eingefärbt, grün für Samstage, rot für Feiertage.</p> <blockquote> <p>Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.</p> </blockquote> <p>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.</p> <p>Ich kann ja mal das p504 aus dem Quasi-Standard rauslösen zum Testen ...</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 19:53:16 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795700?srt=yes#m1795700 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795700?srt=yes#m1795700 <p>@@Der Martin</p> <blockquote> <blockquote> <p>Was ist denn <code>l</code> für ein Element?</p> </blockquote> <p>mit solcher subtiler Kritik kommst du bei Linuchs nicht an. Er ist kreativ,</p> </blockquote> <p>Nein.</p> <p>Wikipedia nennt <a href="https://de.wikipedia.org/wiki/Kreativit%C3%A4t" rel="nofollow noopener noreferrer">Kreativität</a> „die Fähigkeit, etwas zu erschaffen, was neu oder originell und dabei nützlich oder brauchbar ist.“</p> <p>„Neu“ mag auf das, was Linuchs erschafft, noch zutreffen. Aber es ist nicht originell, und schon gar nicht nützlich oder brauchbar.</p> <blockquote> <p>und wenn das, was er sich da ausdenkt, irgendwie "funktioniert", bleibt er dabei.</p> </blockquote> <p>Interpunktion kann Sätze retten, in dem Fall die Anführungszeichen (auch wenn’s falsche sind). Was er sich da ausdenkt, funktioniert eben nicht.</p> <p>Das wurde ihm <a href="https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791726#m1791726" rel="noopener noreferrer">letztens erst wieder gesagt</a>.</p> <blockquote> <p>Dass er dabei hin un dwieder die Regeln von HTML vergewaltigt, scheint ihm egal zu sein.</p> </blockquote> <p>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.</p> <p>Er sollte Shantys singen, aber von Webentwicklung die Finger lassen.</p> <hr> <blockquote> <p>Er weigert sich ja auch hartnäckig, Attributwerte in Anführungszeichen zu setzen, wo es (wenn auch empfohlen) nicht zwingend notwendig ist.</p> </blockquote> <p>Was keinerlei Auswirkung auf Nutzer* hat. Im Gegensatz zu fehlenden Labels bei Eingabefeldern.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 19:00:30 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795695?srt=yes#m1795695 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795695?srt=yes#m1795695 <p>Hallo,</p> <blockquote> <p>Viele meiner „Seltsamkeiten“ sind der Kompatibilität zu alten Standards vor 2008 geschuldet.</p> </blockquote> <p>viele deiner Seltsamkeiten waren noch nie richtig (lies: <em>regelkonform</em>). Auch 2008 nicht.</p> <blockquote> <p>Bei ca. 150 Programmen und ungezählten includes wäre ich nur noch mit Änderungen beschäftigt, wenn ich alle Neuerungen nachziehen würde.</p> </blockquote> <p>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.<br> Richtig wird es davon aber nicht.</p> <p>Immer eine Handbreit Wasser unterm Kiel<br>  Martin</p> <div class="signature">-- <br> Wenn ich den See seh, brauch ich kein Meer mehr. </div> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 19:32:47 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795697?srt=yes#m1795697 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795697?srt=yes#m1795697 <p>Hallo Linuchs!</p> <blockquote> <blockquote> <p>Was ist denn l für ein Element?</p> </blockquote> <p>Erzeugt bei breiten Viewports sowas:</p> <p><a href="/images/2f861ba6-7e0d-11ec-86f5-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/2f861ba6-7e0d-11ec-86f5-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>und bei schmalen sowas:</p> <p><a href="/images/46f27d0c-7e0d-11ec-ad72-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/46f27d0c-7e0d-11ec-ad72-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>Steht in keinem HTML Standard drin.<br> Auch nicht unter “obsolete Elemente“, falls man das sieht.</p> <p>Falls du andere Quellen hast, entschuldige ich mich für diese Kritik.</p> <p>Screenshot: <a href="/images/df3ac9ec-7e13-11ec-90d9-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/df3ac9ec-7e13-11ec-90d9-b42e9947ef30.png?size=medium" alt="Screenshot des Validators" loading="lazy"></a>.</p> <p>Ein weiteres Problem ist, dass das Element gar nicht wirkt (Seitenquelltext ist ohne Leerzeichen, da sonst einfach dort umgebrochen werden würde):</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>TEST<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>TESTTESTTESTTESTTESTTESTTEST<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>l</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>TESTTESTTESTTESTTESTTESTTEST<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>l</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span><span class="token punctuation">></span></span>TESTTESTTESTTESTTESTTESTTEST<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Screenshot bei kleinem Bildschirm:</p> <p><a href="/images/6115d190-7e15-11ec-afff-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/6115d190-7e15-11ec-afff-b42e9947ef30.png?size=medium" alt="Nicht funktionierendes &lt;l&gt;" loading="lazy"></a></p> <p>Au revoir,<br> Samuel Fiedler</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 21:12:56 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795706?srt=yes#m1795706 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795706?srt=yes#m1795706 <p>Moin Linuchs,</p> <blockquote> <blockquote> <p>Die Vorschlagsliste funktioniert nicht, weil</p> </blockquote> <p>Das ist nicht der Grund. Habe die Vögelei dort testweise eingesetzt, weil man sie bei selfHTML nicht life erleben kann.</p> </blockquote> <p>Ja, sie funktioniert aber nur, wenn du sie auch verwendest.</p> <p>Du kannst das SELFHTML-Beispiel auch lokal ausprobieren.</p> <blockquote> <p>Die Datalist OrteVorschlaege wird per JS gesetzt und ist damit per [Strg][U] nicht sichtbar.</p> </blockquote> <p>Im Code-Inspektor der „F12-Developer-Tools“ aber schon </p> <blockquote> <p>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.</p> </blockquote> <p>Du kannst deine Datenquelle doch in verschiedenen Arten (sprich Formaten) exponieren.</p> <blockquote> <pre><code class="block language-js"> <span class="token keyword">var</span> newDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"datalist"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> newDiv<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">"OrteVorschlaege"</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Alles danach brauchst du nicht, weil <code>datalist</code> kein sichtbares Element ist.</p> <blockquote> <blockquote> <p>Was ist denn l für ein Element?</p> </blockquote> <p>Erzeugt bei breiten Viewports sowas:</p> <p><a href="/images/2f861ba6-7e0d-11ec-86f5-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/2f861ba6-7e0d-11ec-86f5-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>und bei schmalen sowas:</p> <p><a href="/images/46f27d0c-7e0d-11ec-ad72-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/46f27d0c-7e0d-11ec-ad72-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>Das geht doch auch standardkonform mit <code>span</code> oder <code>label</code> und CSS.</p> <blockquote> <p>Viele meiner „Seltsamkeiten“ sind der Kompatibilität zu alten Standards vor 2008 geschuldet.</p> </blockquote> <p>Welchen „Standards“ sollen das (gewesen) sein?</p> <blockquote> <p>Bei ca. 150 Programmen und ungezählten includes wäre ich nur noch mit Änderungen beschäftigt, wenn ich alle Neuerungen nachziehen würde.</p> </blockquote> <p>Ach ja, im Nachhinein zeichnet es sich immer aus, wenn man sich <em>vorher</em> eine sinnvolle (lies: wartbare) Projektstruktur überlegt hat …</p> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 21:04:59 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795705?srt=yes#m1795705 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795705?srt=yes#m1795705 <p>Moin Linuchs,</p> <blockquote> <blockquote> <p><code><i@_feiertag| class=crot@_samstag| class=cdgruen></code></p> </blockquote> <p>Da sind Zeilenumbrüche verloren gegangen. <code>@_irgendwas|</code> ist eine Erfindung von mir in der Platzhalter-Datei, ich nenne es „Entscheider“. Entscheidet, ob die Zeile in den per PHP generierten Code eingeht:</p> </blockquote> <p>Warum taucht das dann im HTML-Code in meinem Browser auf, wenn das von PHP bearbeitet werden soll?</p> <blockquote> <blockquote> <p>Sind denn p und a als Kinder von datalist erlaubt und sinnvoll? Ich glaube nicht.</p> </blockquote> <p>Oh, die Änderung von <div> auf <datalist> war nicht genug.</p> </blockquote> <p>Natürlich nicht und es ist ja nicht so, als seist du schon frühzeitig auf die HTML-Referenz hingewiesen worden.</p> <blockquote> <p>Mal sehen, wie tief ich da in die Code-Eingeweide einsteigen muss. Da knallt's wahrscheinlich in anderen Programmen, die dieselben Bausteine benutzen.</p> </blockquote> <p>Das klingt nach einer durchdachten Code-Struktur.</p> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 19:37:56 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795698?srt=yes#m1795698 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795698?srt=yes#m1795698 <p>Servus!</p> <blockquote> <p>Hallo Robert,</p> <p>erstmal danke fürs Mitdenken.</p> <blockquote> <p>Aber wofür möchtest du die datalist beim Tippen tauschen?</p> </blockquote> <p>Ganz normal bei Suchmaschinen. Sie ändert sich mit jedem getippten Zeichen.</p> </blockquote> <p>Ich muss jetzt doch noch mal antworten:</p> <p>Ich habe die auf die <strong>Element-Referenz</strong> geleitet. Die hatte immer schon (seit ca. 2012) keine Live-Beispiele.</p> <p>Dort ist aber unter "Siehe auch" dieses Tutorial mit einem Live-Beispiel verlinkt: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Suchformulare#Suchvorschl.C3.A4ge_mit_datalist" rel="nofollow noopener noreferrer">HTML/Tutorials/Formulare/Suchformulare#Suchvorschläge</a></p> <p>Gib dort bitte mal "unt" ein → dann kommt eben auch der B<strong>unt</strong>specht raus. Bei "ei" die M<strong>ei</strong>se und der <strong>Ei</strong>svogel. Da benötigst du kein JavaScript oder AjaX.</p> <p><strong>Pro-Tipp</strong>: Verwende gültiges und semantisches HTML. Dann sparst Du dir manche Krücke, die du jetzt mit JS, PHP und Voodoo nur unzureichend erzielst.</p> <p>Das gleiche gilt für das l-Element, bei dem dich <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> schon wiederholt auf die mangelnde Zugänglichkeit hingewiesen hat. Es geht eben um ein label, eine Beschreibung für die Eingabe.</p> <p>Der Abschuss ist dein inline-Style:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 736.233px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1218.15px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0.1pt solid <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 10pt<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OrteVorschlaege<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Wer macht denn sowas?</p> <p>Für sowas würde dich jeder ordentliche Kapitän kielholen!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 20:57:45 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795703?srt=yes#m1795703 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795703?srt=yes#m1795703 <p>Moin Linuchs,</p> <blockquote> <blockquote> <p>Aber wofür möchtest du die datalist beim Tippen tauschen?</p> </blockquote> <p>Ganz normal bei Suchmaschinen. Sie ändert sich mit jedem getippten Zeichen.</p> </blockquote> <p>Ähm, das macht die Datalist ganz ohne JavaScript. Alle ihre <code>option</code>-Kinder stehen für Vorschläge zur Verfügung.</p> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Thu, 27 Jan 22 14:35:09 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795719?srt=yes#m1795719 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795719?srt=yes#m1795719 <p>Hallo Linuchs!</p> <p>Ich schreibe jetzt noch mal etwas zu datalist:</p> <h4>Vorteile</h4><ul> <li>Es werden keine Technologien verwendet, die der Benutzer möglicherweise ausgestellt haben könnte</li> <li>Funktioniert ohne HTTP-Requests</li> <li>Semantisch, weil in HTML5 integriert</li> <li>Das DOM muss nicht die ganze Zeit von JavaScript o.Ä <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> geändert werden</li> </ul> <h4>Nachteile</h4><ul> <li>Nicht benutzerdefiniert stylbar</li> <li>Bei 15000 Städten kann eine datalist groß werden, siehe den <a href="https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795709#m1795709" rel="noopener noreferrer">folgenden</a> Beitrag von mir.</li> </ul> <h4>Gebrauch</h4><p>Man definiert eine datalist mit <code><datalist id="ID"></code>.<br> Wenn man sie nutzen möchte, kann man <code><input type="text" list="ID"/></code> nutzen.<br> Bisher sieht unser Beispiel so aus:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>TEST<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>TEST<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p>Dann können wir Optionen hinzufügen. Das tun wir mit <code><option>TEXT</option></code>.<br> Dabei ist TEXT der Text, der vorgeschlagen werden soll.<br> Erhält das option-Element kein value-Attribut, wird einfach der Text ins Inputfeld geschrieben, der als Text in der Option stand.<br> Wenn das option-Element jedoch ein value-Attribut enthält, wird der Text ins Inputfeld geschrieben, der im Value-Attribut steht.</p> <p>Warum machst du eigentlich “nur“ Autovervollständigung, wenn du eigentlich eine <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten" rel="nofollow noopener noreferrer">Auswahlliste</a> haben möchtest?</p> <p>Nun ja, es ist deine Entscheidung, ob du datalist, Auswahllisten oder Ajax verwenden möchtest.</p> <p>Au revoir,<br> Samuel Fiedler</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Falls es JavaScript-ähnliche Technologien im Bereich den Clients gibt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 21:14:08 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795707?srt=yes#m1795707 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795707?srt=yes#m1795707 <blockquote> <p>Falls du andere Quellen hast, entschuldige ich mich für diese Kritik.</p> </blockquote> <p>Gehört überhaupt nicht zum Thema und wurde 2019 diskutiert.</p> <p><a href="https://forum.selfhtml.org/self/2019/mar/30/duerfen-html-tags-zb-tabulatoren-erfunden-werden/1745703#m1745703" rel="noopener noreferrer">Dürfen HTML-Tags (z.B. Tabulatoren) erfunden werden?</a></p> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 20:02:29 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795701?srt=yes#m1795701 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795701?srt=yes#m1795701 <blockquote> <p>Da benötigst du kein JavaScript oder AjaX.</p> </blockquote> <p>Bei 10 Vögeleien sicher nicht. Aber würdest du 15.000 Orte im Dokument mitliefern? Ist doch absurd.</p> <blockquote> <p>Für sowas würde dich jeder ordentliche Kapitän kielholen!</p> </blockquote> <pre><code class="block">left: 736.233px; top: 1218.15px; </code></pre> <p>Da habe ich die links oben Position des input-Feldes (obj) abgefragt, um die Vorschlagsliste darunter zu positionieren. Wenn Firefox tausendstel Pixel meldet, ...</p> <pre><code class="block language-js"><span class="token comment">// 2020-10-12 https://forum.selfhtml.org/self/2020/oct/12/freies-hilfsfeld-beim-tippen-andocken-left-und-top-finden/1776483#m1776483</span> <span class="token keyword">let</span> box <span class="token operator">=</span> obj<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//console.log( "obj.left=[" +box.left +"] top=[" +box.top +"]" );</span> getOrteVar<span class="token punctuation">.</span>obj_vorschlaege<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> box<span class="token punctuation">.</span>left <span class="token operator">+</span> pageXOffset <span class="token operator">+</span><span class="token number">10</span> <span class="token operator">+</span><span class="token string">"px"</span><span class="token punctuation">;</span> getOrteVar<span class="token punctuation">.</span>obj_vorschlaege<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> box<span class="token punctuation">.</span>top <span class="token operator">+</span> pageYOffset <span class="token operator">+</span>obj<span class="token punctuation">.</span>offsetHeight <span class="token operator">+</span><span class="token string">"px"</span><span class="token punctuation">;</span> </code></pre> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 20:08:29 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795702?srt=yes#m1795702 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795702?srt=yes#m1795702 <p>Hallo Gunnar,</p> <blockquote> <blockquote> <blockquote> <p>Was ist denn <code>l</code> für ein Element?</p> </blockquote> <p>mit solcher subtiler Kritik kommst du bei Linuchs nicht an. Er ist kreativ,</p> </blockquote> <p>Nein.</p> <p>Wikipedia nennt <a href="https://de.wikipedia.org/wiki/Kreativit%C3%A4t" rel="nofollow noopener noreferrer">Kreativität</a> „die Fähigkeit, etwas zu erschaffen, was neu oder originell und dabei nützlich oder brauchbar ist.“</p> </blockquote> <p>du hast zu früh aufgehört zu lesen. <a href="https://de.wikipedia.org/wiki/Kreativit%C3%A4t#Etymologie_und_Sprachgebrauch" rel="nofollow noopener noreferrer">Ein Stückchen weiter unten</a> heißt es:</p> <blockquote> <p>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.</p> </blockquote> <p>Immer eine Handbreit Wasser unterm Kiel<br>  Martin</p> <div class="signature">-- <br> Wenn ich den See seh, brauch ich kein Meer mehr. </div> Vorschläge bei Eingabe ins Suchfeld Tue, 25 Jan 22 21:00:20 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795704?srt=yes#m1795704 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795704?srt=yes#m1795704 <p>Moin Linuchs,</p> <blockquote> <p>Bei 10 Vögeleien sicher nicht. Aber würdest du 15.000 Orte im Dokument mitliefern? Ist doch absurd.</p> </blockquote> <p>Außer im veralteten Internet Explorer funktioniert das aber.</p> <p>Viele Grüße<br> Robert</p> Vorschläge bei Eingabe ins Suchfeld Wed, 26 Jan 22 07:35:47 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795709?srt=yes#m1795709 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795709?srt=yes#m1795709 <p>Hallo Linuchs!</p> <blockquote> <blockquote> <p>Da benötigst du kein JavaScript oder AjaX.</p> </blockquote> <p>Bei 10 Vögeleien sicher nicht. Aber würdest du 15.000 Orte im Dokument mitliefern? Ist doch absurd.</p> </blockquote> <p>Genau!<br> 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.<br> Ernsthaft?</p> <p>Naja, man kann sie ja einmal deklarieren und oft nutzen, aber <strong>wer</strong> nutzt allein 600 KB für die Städte?<br> Da tun mir jetzt schon die Entwickler leid, die <strong>das</strong> im Seitenquelltext untersuchen wollen.</p> <blockquote> <blockquote> <p>Für sowas würde dich jeder ordentliche Kapitän kielholen!</p> </blockquote> </blockquote> <p>Ja, <strong>würde</strong>. Aber nicht <strong>wird</strong>.<br> Kielholen würde ein halbwegs ordentlicher Kapitän ihn eher für direkt ausgelieferte 600 KB für die Städte.</p> <blockquote> <p>Da habe ich die links oben Position des input-Feldes (obj) abgefragt, um die Vorschlagsliste darunter zu positionieren. Wenn Firefox tausendstel Pixel meldet,</p> </blockquote> <p>wäre die Positionierung mit JavaScript nicht nur pixelgenau, sondern subpixelgenau .<br> Das wäre also für <strong>jeden</strong> ordentlichen (bzw. genauen) Kapitän geeignet!</p> <p>Ich weiß, ordentlich ≠ genau, aber wer genau arbeitet, dessen Arbeiten sind auch halbwegs ordentlich.</p> <p>Au revoir,<br> Samuel Fiedler</p> HTML5: Suchvorschläge mit datalist Wed, 26 Jan 22 12:44:37 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795710?srt=yes#m1795710 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795710?srt=yes#m1795710 <p>Hallo Matthias,</p> <p>ich glaube, du verstehst da was miss.</p> <ul> <li>Das Popup wird durch Ajax bestückt, d.h. da werden keine 15000 Einträge drin sein, sondern "nur" die Ajax-Antwort des Servers. Das sind bei PLZ/Ort maximal 10, darunter steht dann "nnn weitere Einträge".</li> <li>Im Moment sehe ich "nur" für die PLZ/Ort Suche ein Popup, nicht für die Veranstaltungen. Könnte man sicherlich realisieren, scheint aber nicht realisiert zu sein.</li> </ul> <p>Eine serverseitig ungefilterte Ortsliste als datalist scheint mir recht umfangreich zu sein.</p> <p>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)</p> <p>Da ist also durchaus eine Menge Potenzial für eine custom solution und eine Menge Limit bei der datalist.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Vorschläge bei Eingabe ins Suchfeld Thu, 27 Jan 22 15:51:03 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795720?srt=yes#m1795720 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795720?srt=yes#m1795720 <p>Hallo Samuel,</p> <p>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?</p> <p>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.</p> <p>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.</p> <p>Suche auf remso.eu man "Münster Stein" - da bekommst Du bspw. Bad Münster am Stein angeboten. Eine Datalist würde das ausblenden.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Vorschläge bei Eingabe ins Suchfeld Thu, 27 Jan 22 16:52:09 Z https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795721?srt=yes#m1795721 https://forum.selfhtml.org/self/2022/jan/25/vorschlage-bei-eingabe-ins-suchfeld/1795721?srt=yes#m1795721 <p>Servus!</p> <blockquote> <p>Hallo Samuel,</p> <p>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?</p> <p>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.</p> </blockquote> <p>Wie gesagt:</p> <ul> <li>Ich würde die PLZ und Orte der 58 Veranstaltungen in die datalist übernehmen.</li> <li>Eine Umkreissuche würde ich nur über die PLZ und nicht über so eine Overkill-Liste realisieren. Das wird auch woanders so realisiert. <ul> <li>Nutzer erwarten dort nur eine PLZ - dafür ist kein datalist nötig</li> <li>jede Umkreissuche bezieht sich nur auf Luftlinie und ist eh nicht sehr genau - da benötigt man keine Ortsteile</li> </ul> </li> </ul> <p>Und schon hätte sich das ganze angeblich nötige AjaX-Gedöns erledigt.</p> <blockquote> <p>Das trifft auf Linuchs' Auswahlliste aber nicht zu.</p> </blockquote> <p>Das glaub ich schon. Ich hatte trotz der vielen Möglichkeiten Probleme die Umkreissuche dann wirklich zu starten.</p> <p>Ebay-Kleinanzeigen sucht erstmal los und dann kann man die km weiter einstellen. Das ist bei Linuchs etwas unkonventionell gelöst.</p> <blockquote></blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div>