Eine Suchfunktion läuft nicht mehr


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Sempervivum

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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.

Code:
        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

Erfahrenes Mitglied
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

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

Webhufi

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

Sempervivum

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

Sempervivum

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Hallo Norbert, hat etwas gedauert, weil ich mit verschiedenen anderen Aktivitäten beschäftigt war, aber jetzt ist es fertig:
Code:
    <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

Erfahrenes Mitglied
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
 

Sempervivum

Erfahrenes Mitglied
Hallo Norbert, danke für die Würdigung meines Einsatzes, so ausführlich hätte es nicht sein brauchen, ein Einzeiler hätte auch genügt. Aber ich freue mich darüber.

Was die Links betrifft, meinst Du das sicher so:
links-lightblue.png
Das kannst Du ganz einfach mit dem CSS, siehe Pfeil, erreichen. Möglicher Weise auch noch Buttons etc. ausschließen, so wie es das CMS macht:
Code:
#content a:not(.button):not(.fancybox):not(.zpSO-Uplink-Flat):not(.zpnolayoutlinkstyles) {
    background-color: lightblue;
}

Beste Grüße - Ulrich
 

Webhufi

Erfahrenes Mitglied
Da habe ich mich wohl falsch ausgedrückt:

Wenn ich z.B. von einem Link zu dem entsprechenden Eintrag in der Tabelle springe (oder auch von jedem Verweis im Text an ein Ziel), soll dieser Ziel-Link blau unterlegt sein. Siehe: Von hier dann "...zu diesem Eintrag in der Tabelle", wobei dann "Azeitlichkeit" als Ziel blau unterlegt sein soll.
Möglicherweise muss ich nur dem <a href= ... eine Formatierung hinzufügen? Das wäre zwar eine mords Arbeit, bei vielleicht 300 Link-Verweisen im gesamten Text, wäre aber hübsch ;-)

Übrigens: Es freut mich, dass du dich freust! :)
 

Sempervivum

Erfahrenes Mitglied
Hallo Norbert, dafür gibt es die CSS-Pseudoklasse :target. Versuche dieses CSS:
Code:
        div:target {
            background-color: lightblue !important;
        }
 

Webhufi

Erfahrenes Mitglied
Hallo Ulrich,

nein, es ist immer noch nicht deutlich geworden, was mir vorschwebt. Ich habe es auf meiner Testseite nochmal veranschaulicht, bitte folge Deinem Namen! :)

Die Markierung könnte wieder verschwinden, wenn man irgendwo hinklickt.
 

Sempervivum

Erfahrenes Mitglied
Jetzt verstehe ich dich irgend wie nicht mehr: Hat das mit :target denn überhaupt funktioniert? Wenn ja, schwebt dir anscheinend etwas anderes vor, aber ich verstehe dann nicht was?
 

Webhufi

Erfahrenes Mitglied
Nun ja, deine Pseudo-Klasse hatte den gesamten Absatz markiert, also einen kompletten Text, und diese Markierung verschwand auch nicht wieder, wenn ich mit der Maus hinein- oder daneben klickte.

Ich möchte aber, wie im Beispiel gezeigt, nur diesen Eintrag in der Tabelle namens "Bürgerliche Zeit" hervorheben. Also in etwa so, wie das bei deiner Suche funktioniert, nur dass ich halt wohl bei jedem einzelnen Link das Target farblich definieren muss, um ein einzelnes Wort dieses Zieles bzw. das gesamte Ziel zu markieren; und eben nur dieses Link-Target, und nichts anderes.

Genau so verweise ich oft auf ein Wort oder einen Satz (z.B. "siehe auch Aschenbrödel" innerhalb der Texte; dieses Ziel, auf das ich verlinke, würde sicher optisch leichter gefunden werden, wenn es eingefärbt wäre; es muss nicht mal am Anfang der Seite stehen, nur innerhalb des Monitors sichtbar sein.
Mein Pseudo-Code könnte dabei ein Hinweis sein, wie ich es mir vorstelle.

Wenn es immer noch nicht klar ist, macht es auch nix: Das Ziel wird ja ganz oben angezeigt, man kann es auch so erkennen; es wäre halt netter, wenn dieses Ziel auch so hübsch blau wäre...

Jetzt mach dir aber erst mal ein schönes Wochenende!
LG Norbert
 

Sempervivum

Erfahrenes Mitglied
Ich denke, jetzt verstehe ich, was Du dir vorstellst. Kannst Du mal ein Beispiel angeben? Bei "Bürgerliche Zeit" wird nämlich nur genau dieser Text hervor gehoben.
Ich wünsche ebenfalls einen schönen Sonntag!
 

Webhufi

Erfahrenes Mitglied
Entschuldige, Ulrich, mein Fehler! Beim ersten Link nach unten wurde der gesamte Artikel markiert; es lag daran, dass ich die Überschrift nicht in einen separaten Artikel gestellt hatte. Jetzt geht es.

Ein Wort oder einen Satz innerhalb der Texte auf diese Weise zu verlinken, ist deshalb nicht möglich: die kleinste ansteuerbare Einheit ist ein Artikel. Das wäre auch zu schön gewesen... ;-(
Klar kann ich einen Anker in Form einer ID setzen, aber das wird mir dann doch zu aufwändig; ich verweise deshalb auf eine Überschrift, die als separater Artikel über dem Artikeltext stehen muss, dann klappt alles.

Jetzt kann und muss ich wieder auf die Inhalte konzentrieren! Und die sind sicher nicht einfacher als die nun erfolgreichen Hervorhebungen...

Das hat mir ganz enorm geholfen, nochmals ganz herzlichen Dank für deine Mühen! (y)

Herzliche Grüße

Norbert
 

Webhufi

Erfahrenes Mitglied
Hallo Ulrich,

sorry, dass ich noch ein Anliegen habe...

ist es möglich, in diesem Style die Zielfarbe wieder auszuschalten (durch Klick oder so)?

Das Ziel soll ja nur der Orientierung dienen. Bleibt das Ziel aber blau - auch wenn man scrollt zum Weiterlesen oder auch zurückblättert -, dann schaut es so aus, als wenn es absichtlich so formatiert wäre; das finde ich etwas "unhübsch". Ich denke, du verstehst meinen ästhetischen Wunsch :)

Liebe Grüße
Norbert

<style>
div:target {
background-color: lightblue !important;
}
</style>
 

Sempervivum

Erfahrenes Mitglied
Hallo Norbert, das ist ein begründeter Wunsch. Die Frage ist nur, was man als Auslöser für das Ausschalten nimmt. Scrollen, Klick irgend wo?
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge

Forum-Statistiken

Themen
272.351
Beiträge
1.558.596
Mitglieder
187.824
Neuestes Mitglied
Danke!