✔ Eine Suchfunktion läuft nicht mehr

[Sempervivum]

Wie gelassen du das alles nimmst, Ulrich

Etwas Gelassenheit gehört schon dazu beim Programmieren denn es ist die Regel, dass nicht alles auf Anhieb funktioniert.

Das mit dem "urknall" werde ich untersuchen ...
Programmiert ist es jedenfalls so, wenn man den Inhalt des Eingabefeldes ändert und dann Enter drückt, werden die alten Ergebnisse gelöscht und ein neue Suche begonnen.

Ach ja, jetzt werde ich fast unverschämt vor lauter Freude: Wenn die gesamte Seite mit Enter durchsucht wurde, tut sich beim weiteren Enter nichts mehr. Könnte man dann einen Hinweise geben, dass die Suche beendet ist und wieder an den Anfang springen? Vielleicht sogar an den Anfang des zweiten Menüs? Das wäre super.

Daran habe ich auch schon gedacht und es ist kein Problem, das zu realisieren. Würde dir ein prompt ausreichen, das heißt ein kleines Fenster das aufpoppt und die Frage stellt?

Wo darf ich dich unterbringen, mit vielleicht einem Link?

Das ist ein freundliches Angebot aber es ist deine Homepage und Du solltest selber entscheiden wo und wie Du einen Hinweis unterbringst. Mit einem Link ist es schlecht, ich habe zwar eine Homepage aber die habe ich in der vergangenen Zeit kaum noch gepflegt und sie ist nicht mehr vorzeigbar.

 

[Sempervivum]

Mir fällt auch auf, dass - wenn ich nach "urknall" suche - der erste Artikel gar nicht durchsucht wird. Liegt das vielleicht daran, dass ich schon einmal danach gesucht hatte, und diese Suche weiter unten auf der Seite fortgeführt wird oder auch gar nicht mehr?

Mit deiner Vermutung liegst Du genau richtig: Die Fundstellen sind nummeriert und idxSearch, das die aktuelle Nummer angibt, blieb bei einer neuen Suche auf dem alten Wert stehen. Das lässt sich jedoch leicht korrigieren, indem Du die mit dem Pfeil markierte Zeile im Javascript einfügst.

        function suchen(needle) {
            // event.preventDefault();
            // Unterscheidet sich der Suchstring vom gespeicherten?
            // D. h. handelt es sich um eine neue Suche?
            if (needle != lastSearchStr) {
                lastSearchStr = needle;
                idxSearch = 0; // <-- diese Zeile einfuegen
                // Aenderungen am DOM von der vorigen Suche rueckgaengig machen
                undoSearch();
                // Suche starten

 

[Webhufi]

Klar genügt für die Abfrage ein kleines Fenster! ;-)

idxSearch = 0;:
Ich habe das jetzt mit dem Suchbegriff zündung probiert: er wurde nur einmal gefunden, obwohl direkt darunter der Begriff nochmal steht. Im Suchfeld stehen auch immer noch die alten Suchbegriffe zur Auswahl

 

[Sempervivum]

idxSearch = 0;:
Wenn der Doppelpunkt dahinter steht, führt das zu einem Syntaxfehler und das Skript bricht ab - dann läuft nichts mehr.

 

[Webhufi]

Mein Fehler: der : sollte das bedeuten, was eben der : nach "Mein Fehler" bedeutet: Achtung, etwas folgt! ;-)
Im Script ist der nicht drin.

 

[Sempervivum]

OK, in dem was jetzt online ist, finde ich diese Anweisung nicht. Trage sie noch mal ein, damit ich das Problem untersuchen kann.

 

[Webhufi]

Done!

 

[Sempervivum]

Jetzt funktioniert es für mich. Was fehlt ist noch die Nachricht wenn man am Ende der Fundstellen angelangt ist. Das mache im später.

 

[Sempervivum]

Hallo Norbert, hat etwas gedauert, weil ich mit verschiedenen anderen Aktivitäten beschäftigt war, aber jetzt ist es fertig:

    <script>
        function undoSearch() {
            // Ueber alle Fundstellen:
            document.querySelectorAll('span.found').forEach(item => {
                // Elternelement ermitteln
                const parent = item.parentNode;
                // Textknoten mit Text des Elternelementes erzeugen
                const newTxtNode = document.createTextNode(parent.textContent);
                // ... und Elternelement damit ersetzen
                parent.replaceWith(newTxtNode);
                // Jetzt hat der Knoten wieder der ursprünglichen Zustand
            });
        }
        function search(node, needle) {
            const regex = new RegExp('(' + needle + ')', 'i');
            node.childNodes.forEach(node => {
                switch (node.nodeType) {
                    // Handelt es sich um einen Elementknoten?
                    case 1:
                        // Suche fortsetzen
                        search(node, needle);
                        break;
                    // Handelt es sich um einen Textknoten?
                    case 3:
                        // Den Text heraus ziehen
                        const txt = node.textContent.trim();
                        // console.log(txt)
                        if (txt != '') {
                            // Um den gefundenen Text hervor zu heben, betten wir ihn ein
                            // span-Element ein, das wir dann geeignet mit CSS gestalten koennen.
                            // In einem Textknoten wird jedoch kein HTML interpretiert.
                            // Daher erzeugen wir ein neues span-Element und tragen dort den
                            // geaenderten Text ein.
                            let newEle = document.createElement('span');
                            newEle.innerHTML = txt.replace(regex, '<span class="found">$1</span>')
                            node.replaceWith(newEle);
                            break;
                        }
                }
            });
        }
        let lastSearchStr = '',
            foundElems,
            idxSearch = 0;
        // Die folgende Funktion wird durch das Suchformular aufgerufen
        // und startet die Suche
        function suchen(needle) {
            // event.preventDefault();
            // Unterscheidet sich der Suchstring vom gespeicherten?
            // D. h. handelt es sich um eine neue Suche?
            if (needle != lastSearchStr) {
                lastSearchStr = needle;
                idxSearch = 0;
                // Aenderungen am DOM von der vorigen Suche rueckgaengig machen
                undoSearch();
                // Suche starten
                search(document.querySelector('body'), needle);
                // Gefundene Element bereit stellen
                foundElems = document.querySelectorAll('.found');
                // Erstes gefundenes Element hervor heben
                foundElems[idxSearch].classList.add('highlight');
                // ... und in den sichtbaren Bereich scrollen
                foundElems[idxSearch].scrollIntoView();
                searchDone = true;
            } else {
                // Hevorhebung des alten gefundenen Elementes löschen
                foundElems[idxSearch].classList.remove('highlight');
                // Sind weitere gefundene Element vorhanden?
                if (foundElems[idxSearch + 1]) {
                    // Naechstes gefundenes Element hervor heben
                    idxSearch++;
                    foundElems[idxSearch].classList.add('highlight');
                    // ... und in den sichtbaren Bereich scrollen
                    foundElems[idxSearch].scrollIntoView();
                } else {
                    // Keine weiteren gefundenen Elemente.
                    // Nachricht an Benutzer
                    let response = confirm('Keine weiteren Fundstellen vorhanden<br>' +
                        'zurück zum Suchfeld?');
                    console.log(response);
                    if (response) {
                        document.querySelector('input[name="suchtexting"]').scrollIntoView();
                    }
                }
            }
            return false;
        }
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelector('form[name="search"]').addEventListener('submit', function (event) {
                event.preventDefault();
                suchen(document.querySelector('input[name="suchtexting"]').value);
            });
        });
    </script>

Hoffe, es funktioniert auch bei dir. Wenn nicht, melde dich wieder.

 

[Webhufi]

Hallo Ulrich,

natürlich ist es kein Problem, wenn es etwas länger dauert; wie ja bekannt ist, kümmerst du dich gerne um eine Menge Probleme... ;-)

In deinem Script zur Abfrage musste ich nur noch ein <br> rausnehmen, das sichtbar war; das break zu realisieren, war mir nicht möglich. Habe es einfach durch einen Punkt ersetzt.

Insgesamt ist dein Script allem überlegen, was ich im Netz gefunden hatte: PHP, mit Datenbanken, komplizierten Installationen auf dem Server und so fort... Alles völlig abgehoben! Was du hier geleistet hast, ist jeder Bewunderung wert, vor allem der meinen!

Was hältst du von dem 'linkischen' Hinweis direkt unter dem Suchfeld? Ist das okay für dich?
Vielleicht kann ich das auch als Pop up gestalten, weiß noch nicht.


Zur blauen Hervorhebung eines Begriffs hätte noch eine andere Idee. Ist es ohne großen Aufwand möglich, dass ein Link, der innerhalb der Texte auf einen Begriff gesetzt wird, diesen Ziel-Link auch so hübsch blau erscheinen lässt? Das wäre für den Leser dieser nicht gerade einfachen Page eine enorme visuelle Hilfestellung.

Ich gehe jetzt mal ganz naiv von einer Pseudoprogrammierung aus: Link ist gleich Linkziel plus Textfarbe.

Herzliche Grüße

Norbert