Dursuchbares Archiv mit <details> – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Dursuchbares Archiv mit <details> Sat, 23 Apr 22 15:56:56 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798670#m1798670 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798670#m1798670 <p>Hallo, ich habe für einen Verein ein Beschlussarchiv in Html erstellt. Es wurde wert darauf gelegt, dass das ganze nur mit Html (und CSS) funktioniert. Ohne Php und vor allem ohne Datenbank.</p> <p>Ich habe dazu die vielen Beschlüsse jeweils in einen Container nach folgendem Muster gepackt.</p> <pre><code class="block"> <details class="angenommen"> <summary>Titel des Beschlusses</summary> <p>Beschlossen durch Telefonkonferenz</p> <dl class="boxKopf"> <dt>Antragstext:<br><img src="Pictogramme/angenommen.svg" alt="angenommen" class="status"></dt> <dd>Hier steht der Antragstext</dd> </dl> Hier folgen weitere Inhalte, z.B. ein Abstimmungsergebnis </details> </code></pre> <p>Das ist auch alles OK. Nur soll das ganze natürlich durchsuchbar sein. Leider durchsucht die browserinterne Suche (mit Strg + f) nur die aufgeklappten Container. Kann man das irgendwie beeinflussen. Die Suche hat ja meist den Zweck, einen Beschluss zu finden, wenn man dessen Titel nicht kennt.</p> <p>Falls das nicht geht, gibt es eine Möglichkeit, alle details-Container z.B. mit einem Button aufzuklappen?</p> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 16:35:42 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798671#m1798671 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798671#m1798671 <p>@@Friedel</p> <blockquote> <p>gibt es eine Möglichkeit, alle details-Container z.B. mit einem Button aufzuklappen?</p> </blockquote> <p>Ja: die <code>open</code>-Eigenschaft aller <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement" rel="nofollow noopener noreferrer"><code>details</code>-Elemente</a> auf <code>true</code> setzen. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/gOoyJJp" rel="noopener noreferrer">Codepen</a></p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 17:10:47 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798672#m1798672 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798672#m1798672 <p>Hallo Friedel,</p> <p>darf auch JavaScript verwendet werden?</p> <p>Damit könntest Du die Textinhalte durchsuchen und die Container, in denen Du den Text antriffst, aufklappen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Dursuchbares Archiv mit <details> Fri, 29 Apr 22 08:35:33 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798780#m1798780 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798780#m1798780 <p>@@Friedel</p> <blockquote> <p>Leider durchsucht die browserinterne Suche (mit Strg + f) nur die aufgeklappten Container.</p> </blockquote> <p>Chrome hat da eine <a href="https://developer.chrome.com/blog/hidden-until-found/" rel="nofollow noopener noreferrer">Idee</a>: <code>hidden="until-found"</code> (<a href="https://twitter.com/stefanjudis/status/1519890352785838080" rel="nofollow noopener noreferrer">via Stefan Judis</a>)</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sun, 01 May 22 08:34:11 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798809#m1798809 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798809#m1798809 <p>@@Friedel</p> <blockquote> <p>Leider durchsucht die browserinterne Suche (mit Strg + f) nur die aufgeklappten Container.</p> </blockquote> <p>In Firefox und Safari ist das so.</p> <p>In Chromia (Chrome, Edge) wird auch in zugeklappten <code>details</code> gesucht und diese werden bei Treffern automatisch aufgeklappt – genau, wie du es willst.</p> <p>Wäre wünschenswert, wenn andere das auch so machen würden. Gleich mal Tickets für <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1767180" rel="nofollow noopener noreferrer">Firefox</a> und <a href="https://bugs.webkit.org/show_bug.cgi?id=239940" rel="nofollow noopener noreferrer">Safari</a> angelegt.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 17:33:20 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798674#m1798674 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798674#m1798674 <p>Ich mache Schluss für heute. Wenn ich dein Beispiel aus dem Codepen nachbaue, funktioniert es nicht. Wenn den Nachbau wieder in Codepen kopiere, funktioniert es. Ich finde keinen Fehler. Ich denke, ich habe alle möglichen Fehlerquelle ausgeschlossen. Ich habe sogar testweise ein <code>alert("jhgfjhc");</code> an den Anfang vom Script eingebaut. Der Alert kommt. Das Script sollte also ausgeführt werden.</p> <p>Ich habe deinen Codepen getestet → funktioniert.</p> <p>Ich habe deinen Quellcode in eine Html-, CSS- und JS-Datei kopiert → funktioniert nicht.</p> <p>Ich habe dein Script in meine Seite eingebaut → funktioniert nicht.</p> <p>Ich die so veränderte Seite in Codepen kopiert → funktioniert.</p> <p>Ich bin ratlos.</p> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 17:33:13 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798673#m1798673 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798673#m1798673 <p>Hallo,</p> <blockquote> <p>darf auch JavaScript verwendet werden?</p> </blockquote> <p>das hoffe ich doch stark. Denn die browsereigene Suche (Ctrl-F) findet meines Wissens nur Text, der auch aktuell angezeigt wird.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <blockquote> <p>Damit könntest Du die Textinhalte durchsuchen und die Container, in denen Du den Text antriffst, aufklappen.</p> </blockquote> <p>Das ist noch zielführender und näher an der Frage als Gunnars Tipp, einfach alle detail-Elemente aufzuklappen.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> Мир для України. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ich schrieb bewusst nicht "sichtbar ist". Denn Ctrl-F findet auch Text, der in Weiß auf Weiß gesetzt ist, oder Schriftgröße 0 hat. Aber eben nicht in unsichtbaren Elementen (hidden-Attribut, display:none oder eben zugeklappte details-Elemente. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 19:28:23 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798677#m1798677 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798677#m1798677 <p>@@Rolf B</p> <blockquote> <p>Hallo Friedel,</p> <p>darf auch JavaScript verwendet werden?</p> </blockquote> <p>Die Frage hatte Friedel schon beantwortet, bevor du sie gestellt hast: <em>„gibt es eine Möglichkeit, alle details-Container z.B. <strong>mit einem Button</strong> aufzuklappen?“</em></p> <p>Buttons tun 2½erlei Dinge:</p> <ul> <li>ein Formular absenden. Das will Friedel nicht.</li> <li>(die Eingaben in einem Formular zurücksetzen. Dafür gibt es kaum sinnvolle Anwendungsfälle.)</li> <li>Eine Aktion (JavaScript) auf der Seite ausführen. Das ist hier gefragt.</li> </ul> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 17:43:21 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798675#m1798675 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798675#m1798675 <blockquote> <blockquote> <p>darf auch JavaScript verwendet werden?</p> </blockquote> <p>das hoffe ich doch stark. Denn die browsereigene Suche (Ctrl-F) findet meines Wissens nur Text, der auch aktuell angezeigt wird.[^1]</p> </blockquote> <p>Es wäre besser, wenn es ohne JavaScript ginge. Aber das geht offensichtlich nicht.</p> <blockquote> <blockquote> <p>Damit könntest Du die Textinhalte durchsuchen und die Container, in denen Du den Text antriffst, aufklappen.</p> </blockquote> <p>Das ist noch zielführender und näher an der Frage als Gunnars Tipp, einfach alle detail-Elemente aufzuklappen.</p> </blockquote> <p>Das erscheint mir sinnvoll, die Idee ist mir aber nicht gekommen. Näher an der Frage ist es sicher nicht.</p> <blockquote> <p>Falls das nicht geht, gibt es eine Möglichkeit, alle details-Container z.B. mit einem Button aufzuklappen?</p> </blockquote> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 17:45:51 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798676#m1798676 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798676#m1798676 <p>Hallo Friedel,</p> <blockquote> <p>alert("jhgfjhc");</p> </blockquote> <p>Das ist das Debug-Tool von 1999. Heute haben Browser Entwicklerwerkzeuge, wo man Breakpoints setzen kann und wo man in der Konsole Fehlermeldungen bekommt, wenn Syntax-Fehler im Script sind.</p> <p>Welche Fehlermeldung steht bei Dir in der Konsole?</p> <p>Wenn alle Stricke reißen: Stell die Seite (oder eine anonymisierte Version davon) online, damit wir draufschauen können.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 19:36:02 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798678#m1798678 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798678#m1798678 <p>@@Friedel</p> <blockquote> <p>Es wäre besser, wenn es ohne JavaScript ginge. Aber das geht offensichtlich nicht.</p> </blockquote> <p>Du hattest selbst <a href="https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798677#m1798677" rel="noopener noreferrer">JavaScript ins Spiel gebracht</a>.</p> <hr> <blockquote> <blockquote> <blockquote> <p>Damit könntest Du die Textinhalte durchsuchen und die Container, in denen Du den Text antriffst, aufklappen.</p> </blockquote> <p>Das ist noch zielführender und näher an der Frage als Gunnars Tipp, einfach alle detail-Elemente aufzuklappen.</p> </blockquote> <p>Das erscheint mir sinnvoll, die Idee ist mir aber nicht gekommen. Näher an der Frage ist es sicher nicht.</p> </blockquote> <p>Vielleicht nicht näher an deiner <em>Frage</em>, aber näher an deinem <em>Problem</em>.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JjMVgoG" rel="noopener noreferrer">neuer Codepen</a>:</p> <ul> <li>Der Einfachheit halber lasse ich in dem Beispiel nur in den <code>details</code>-Elementen suchen; das sollte man eigentlich im ganzen <code>body</code> tun.</li> <li>Statt <code>innerHTML</code> könnte man besser einen TreeWalker verwenden?</li> <li>Gefundene Treffer werden jeweils mit einem <code>mark</code>-Element ausgezeichnet.</li> </ul> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 20:55:24 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798686#m1798686 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798686#m1798686 <blockquote> <blockquote> <p>alert("jhgfjhc");</p> </blockquote> <p>Das ist das Debug-Tool von 1999. Heute haben Browser Entwicklerwerkzeuge, wo man Breakpoints setzen kann und wo man in der Konsole Fehlermeldungen bekommt, wenn Syntax-Fehler im Script sind.</p> </blockquote> <p>Sollte 2022 in jedem Browser funktionieren, im Gegensatz zu 1999. Da ging sowas nicht in jedem Browser.</p> <blockquote> <p>Welche Fehlermeldung steht bei Dir in der Konsole?</p> </blockquote> <pre><code class="block">Uncaught TypeError: document.querySelector(...) is null <anonymous> file:///Pfad/beschlussarchiv.js:13 beschlussarchiv.js:13:10 <anonym> file:///Pfad/beschlussarchiv.js:13 </code></pre> <p>Und in file:///Pfad/beschlussarchiv.js:13 steht:</p> <pre><code class="block">document.querySelector('#open-all').addEventListener( </code></pre> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 19:41:00 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798679#m1798679 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798679#m1798679 <p>@@Gunnar Bittersmann</p> <blockquote> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JjMVgoG" rel="noopener noreferrer">neuer Codepen</a>:</p> </blockquote> <p>Das steckt noch ein Fehler drin. In den Artikeln 1 und 3 kommt „Recht“ vor; das wird aber nicht gefunden. Wieso nicht? Wer findet den Fehler?</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sun, 24 Apr 22 06:46:45 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798689#m1798689 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798689#m1798689 <p>Servus!</p> <blockquote> <blockquote> <p>...</p> </blockquote> <p>Vielleicht nicht näher an deiner <em>Frage</em>, aber näher an deinem <em>Problem</em>.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JjMVgoG" rel="noopener noreferrer">neuer Codepen</a>:</p> <ul> <li>Der Einfachheit halber lasse ich in dem Beispiel nur in den <code>details</code>-Elementen suchen; das sollte man eigentlich im ganzen <code>body</code> tun.</li> <li>Statt <code>innerHTML</code> könnte man besser einen TreeWalker verwenden?</li> <li>Gefundene Treffer werden jeweils mit einem <code>mark</code>-Element ausgezeichnet.</li> </ul> <p lang="uk"> Живіть довго і процвітайте</p> </blockquote> <p>@@Gunnar Bittersmann Vielen Dank! Das ist ein sehr schönes Beispiel.</p> <p>Die Frage nach <strong>„Suchen innerhalb einer Seite“</strong> kommt immer wieder. Als Linuchs im Januar/Februar danach gefragt hatte, hatte ich mal einen <em>Stub</em> im Wiki aufgesetzt:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Formulare/Suchen_und_Filtern" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Formulare/Suchen_und_Filtern</a></li> </ul> <p>Ich habe im Moment nur keine Zeit dazu.</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> Dursuchbares Archiv mit <details> Sun, 24 Apr 22 09:32:20 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798692#m1798692 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798692#m1798692 <p>@@Gunnar Bittersmann</p> <blockquote> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JjMVgoG" rel="noopener noreferrer">neuer Codepen</a>:</p> </blockquote> <p>Und noch einen Fehler berichtigt: das <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role" rel="nofollow noopener noreferrer">ARIA-Attribut <code>role="search"</code></a> am <code>form</code>-Element hatte gefehlt.</p> <p>(Bei der Gelegenheit auch noch die Namen von <code>form</code> und <code>input</code> geändert.)</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 19:59:09 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798680#m1798680 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798680#m1798680 <p>Hallo Gunnar,</p> <p>includes ist case sensitive. Entweder toLowerCase auf den textContent (was vermutlich auch bei toLocaleLowerCase im Unicode-Dschungel zu Problemen führen kann) oder du musst zum Suchen schon die Regex benutzen. Und die bitte vor dem foreach erzeugen, nicht pro Durchlauf.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 20:46:29 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798685#m1798685 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798685#m1798685 <p>Hallo Gunnar,</p> <p>ich hab gebastelt und bin damit rausgekommen:</p> <pre><code class="block language-js"><span class="token keyword">const</span> detailsElements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'details'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token string">'search-form'</span><span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> term <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token string">'search-form'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">.</span>search<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>term<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> detailsElement <span class="token keyword">of</span> detailsElements<span class="token punctuation">)</span> <span class="token punctuation">{</span> detailsElement<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> matcher <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>term<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">'gi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> detailsElement <span class="token keyword">of</span> detailsElements<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> html <span class="token operator">=</span> detailsElement<span class="token punctuation">.</span>innerHTML<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><\/?mark></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>matcher<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>detailsElement<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> html <span class="token operator">=</span> html<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>matcher<span class="token punctuation">,</span> <span class="token string">'<mark>$1</mark>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> detailsElement<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> detailsElement<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> detailsElement<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> html<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Die Version, die mir wegen der Polymorphie noch besser gefällt, aber schon unter "write-only" laufen müsste, ist:</p> <pre><code class="block language-js"><span class="token keyword">const</span> detailsElements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'details'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token string">'search-form'</span><span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> term <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token string">'search-form'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">.</span>search<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token keyword">const</span> matcher <span class="token operator">=</span> term <span class="token operator">?</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>term<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">'gi'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">test</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> detailsElement <span class="token keyword">of</span> detailsElements<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> html <span class="token operator">=</span> detailsElement<span class="token punctuation">.</span>innerHTML<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><\/?mark></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> detailsElement<span class="token punctuation">.</span>open <span class="token operator">=</span> matcher<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>detailsElement<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>detailsElement<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token punctuation">{</span> html <span class="token operator">=</span> html<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>matcher<span class="token punctuation">,</span> <span class="token string">'<mark>$1</mark>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> detailsElement<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> html<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Dursuchbares Archiv mit <details> Sun, 24 Apr 22 04:52:29 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798688#m1798688 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798688#m1798688 <p>@@Rolf B</p> <blockquote> <p>includes ist case sensitive.</p> </blockquote> <h3> ‍♂️</h3><blockquote> <p>oder du musst zum Suchen schon die Regex benutzen.</p> </blockquote> <p>Im Codepen geändert: <code class="language-js bad">detailsElement<span class="token punctuation">.</span>textContent<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>term<span class="token punctuation">)</span><span class="token punctuation">)</span></code> zu <code class="language-js good">regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>detailsElement<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">)</span></code>.</p> <blockquote> <p>Und die bitte vor dem foreach erzeugen, nicht pro Durchlauf.</p> </blockquote> <p>Isch ’abe gar kein <code>forEach</code>. </p> <p>Aber ja, natürlich außerhalb der Schleife; wo denn sonst?</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sat, 23 Apr 22 21:29:16 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798687#m1798687 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798687#m1798687 <p>Liebe(r) Friedel,</p> <blockquote> <pre><code class="block">Uncaught TypeError: document.querySelector(...) is null <anonymous> file:///Pfad/beschlussarchiv.js:13 beschlussarchiv.js:13:10 <anonym> file:///Pfad/beschlussarchiv.js:13 </code></pre> <p>Und in file:///Pfad/beschlussarchiv.js:13 steht:</p> <pre><code class="block">document.querySelector('#open-all').addEventListener( </code></pre> </blockquote> <p>die Fehlermeldung will Dir sagen, dass im Dokument kein Element mit der ID <code>open-all</code> gefunden werden konnte.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Dursuchbares Archiv mit <details> Sun, 24 Apr 22 08:14:05 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798690#m1798690 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798690#m1798690 <p>Was so ein Feierabend alles bewirken kann …</p> <p>Heute morgen kurz drüber geschaut und verwundert gedacht: Das kann doch nicht gehen. Das ganze Script in eine init() gepackt und mit DOMContentLoaded aufgerufen → funktioniert.</p> weiteres PHP-Suchscript Tue, 26 Apr 22 20:51:03 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798751#m1798751 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798751#m1798751 <blockquote> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Formulare/Suchen_und_Filtern" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Formulare/Suchen_und_Filtern</a></li> </ul> </blockquote> <p>Hallo,</p> <p>unter „PHP-Suchscripte“ würde auch die <a href="https://werner-zenk.de/archiv/kleine-suchmaschine.php" rel="nofollow noopener noreferrer"><strong>Suchmaschine von Werner Zenk</strong></a> gut reinpassen.</p> Dursuchbares Archiv mit <details> Sun, 24 Apr 22 09:16:15 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798691#m1798691 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798691#m1798691 <p>@@Friedel</p> <blockquote> <p>Heute morgen kurz drüber geschaut und verwundert gedacht: Das kann doch nicht gehen. Das ganze Script in eine init() gepackt und mit DOMContentLoaded aufgerufen → funktioniert.</p> </blockquote> <p>Mit dem Script an der richtigen™ Stelle wäre das nicht passiert: am Ende des <code>body</code>. Dann blockiert das Laden und Ausführen des Scripts nicht die Generierung des DOM und das Rendern der Seite – Performancegewinn.</p> <p>Und <code>DOMContentLoaded</code> braucht man dann auch nicht.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> Dursuchbares Archiv mit <details> Sun, 24 Apr 22 10:19:56 Z https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798693#m1798693 https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798693#m1798693 <p>Da sind noch mehr Fehler drin. Eine Suche nach <code>s</code> findet z.B. auch das s in <code><summary></code> und zerschießt damit die dl. Textstellen, die nach einem Slash stehen, werden nicht gefunden. Ein „recht“ in „Pflicht/Recht“ wird daher nicht gefunden. Trotzdem vielen Dank für die tollen Vorlagen.</p> <p>Inzwischen gibt es bei mir einen einen großen Fortschritt, der das ganze vielleicht überflüssig macht. Das Beschlussarchiv umfasst bis jetzt mehrere Hundert Beschlüsse und es kommen immer wieder welche dazu. Offensichtlich hatten einige Vorstandsmitglieder die irre Vorstellung, dass ich das ganze auch noch in eine Typo3-Website einfriemle. Selbst wenn ich glauben würde, dass das möglich ist, würde ich das nicht versuchen. Nachdem ich das also ausgeschlossen habe, halten einige Vorstandsmitglieder es nicht mehr für ausgeschlossen, das ganze mit Php und Datenbank zu machen… Imho ist das auch die einzige sinnvolle Option. In wenigen Jahren wird das Archiv auf mehrere Tausend Beschlüsse gewachsen sein. Das ist nicht das ideale Umfeld für eine JavaScript-Suche. Da fehlen ja auch noch einige Features. Und JavaScript kommt da irgendwann an seine Grenzen. Dazu kommt, dass das ganze auch auf dem Smartphone funktionieren muss. Ich habe kein Smartphone und die Testumgebungen, die der Firefox und andere Browser auf dem Desktop bieten, sind nicht wirklich geeignet, um die Performance und Usability auf dem Smartphone zu testen. Da kann man meist nur Anhaltspunkte über die Eignung des Layouts gewinnen.</p>