✔ Treffer durch Suche innerhalb eingeklappter Inhalte

[Nusspli]

Hallo zusammen...

Ich hoffe ich bin bei Euch richtig. Habe ein für mich doch recht schwieriges Problem zu lösen.

Problemstellung: Da sich auf einer einzigen Seite viele viele Anweisungen und Inhalte befinden, muss diese nach Schlagwörtern durchsuchbar sein. Zwecks der Übersichtlichkeit sind allerdings die Themen als solche "eingeklappt" und klappen nur durch einen Klick auf die Überschrift (wie man es beispielsweise bei FAQs kennt) auf. Andernfalls wächst die Seite ins bodenlose. Entsprechende Anker fürs hin- und herspringen usw. sind gesetzt und funktionieren.

Jetzt brauche ich aber sowohl ein Suchfeld, als auch eine Möglichkeit, eben auch diese ausgeklappten/ausgeblendeten Inhalte auf ein Schlagwort zu durchsuchen und ggf. den betreffenden Part in dem sich das Suchergebnis befindet auszuklappen und zu markieren.
Dazu kommt noch, dass nicht alle Ergebnisse auf einmal ausgegeben werden sollen, sondern so wie bei einer 0815-Suche per Strg+F immer schön der Reihe nach pro "Suche drücken"...bis ich am gewünschten Fleck bin. Das Suchfenster muss dann natürlich immer mit runter wandern bzw. konstant in der oberen Ecke bleiben. Wie eben jede normale Strg+F-Suche.

Oh Gott..es ist hoch schwer das zu beschreiben... aber ich hoffe ich habe mich halbwegs verständlich ausgedrückt.
Dass das mit Javascript zu bewältigen sein soll habe ich schon erfahren... es happert allerdings gewaltig an der Umsetzung.

Über Hinweise wäre ich sehr dankbar... und ich bin relativer Anfänger. Haut mir bitte keine extremen Fachbegriffe um die Ohren.

Danke und viele Grüße

 

[tombe]

Also mit Javascript wäre das im Prinzip sicher möglich, doch ich denke das der Aufwand dafür ernorm wäre.

Ist die Seite bzw. der Inhalt fest aufgebaut oder steckt da eine Datenbank dahinter die man eventuell bei der Suche benützen kann?

 

[Nusspli]

Danke dir für die Antwort...

Der Inhalt ist fest aufgebaut und es steht keine Datenbank im Hintergrund.
Ggf. sollte ich das nochmal überdenken...aber es übersteigt leider auch schon mein Wissen, wie ich eine bestehende Datenbank (welche überhaupt? Access?) in eine Website einbinde.
Wenn das so eher funktioniert, mache ich mich im Internet schlau über welche Befehle das funktioniert...

Für den Fall ich habs noch nicht geschrieben: benutzt wird Expression Web 4... vllt. erleichtert das ein bisschen die Sache?

Viele Grüße

 

[tombe]

Eine Datenbank würde halt das Suchen selber einfacher machen, nicht aber das Markieren der Treffer auf der Seite. Das Ergebnis der Suche würde dann z.B. auf einer separaten Seite erscheinen. Um so etwas zu "programmieren" würde sich PHP in Verbindung mit mySQL als Datenbank anbieten.

Eine andere Möglichkeit wäre eventuell die Google Suche auf der eigenen Homepage. Du kannst dich ja da mal einlesen ob du damit etwas anfangen kannst.

Hier gibt es ein paar Beispiele dafür auch von anderen Anbietern.

 

[Nusspli]

Ok...danke schön. Ich werd mich sofort ans einlesen machen...

Das erste Problem das ich jetzt allerdings schon wieder sehe: Die Seite ist in einem Intranet gespeichert und sollte wenn möglich natürlich keine Verbindung ins Internet aufbauen.. google-Suche verlangt das ja bzw. möchte die Seite indizieren wenn ich das richtig verstanden hab.

Es muss eine völlig unabhängige Suche sein.... werd mich mal schlau machen...

Für weitere Tipps und Hilfen bzgl. des Grundproblems wäre ich weiter sehr dankbar.

 

[tombe]

So damit du mal was zum Probieren hast, hier mal der erste Entwurf:

<script language="javascript" type="text/javascript">
var orig = "";
var start = 0;

function highlight () {
// hier wird der gesuchte Begriff übergeben
suche = document.getElementById("txtSuche").value.toLowerCase();
// in "orig" wird der Originaltext gespeichert um die Formatierung wieder entfernen zu können
// außerdem wird er in Kleinbuchstaben umgewandelt da die Suche sonst nicht richtig funktioniert.
if (orig == "") {
	orig = document.getElementById("inhalt").innerHTML;
	text = orig.toLowerCase();
} else {
	document.getElementById("inhalt").innerHTML = orig;
}
// Anfangsposition des Wortes ermitteln oder den Zähler zurücksetzen wenn Ende erreicht oder nichts gefunden wurde
start = text.indexOf(suche, start);
if (start == -1) {
	start = 0;
	alert("Das Ende der Seite wurde erreicht oder der Suchbegriff wurde nicht gefunden!");
	return;
}
// Endposition des Wortes ermitteln
ende = start + suche.length;
// Sucbegriff formatieren
neu = orig.substring(0, start) + "<span style='color: red;  font-weight: bolder;'>" + orig.substring(start, ende) + "</span>" + orig.substring(ende);
// und anzeigen
document.getElementById("inhalt").innerHTML = neu;
// Posision für nächsten Durchgang setzen
start = ende;

}
</script>

<p>
	<input type="text" name="txtSuche" id="txtSuche" value="" size="20" maxlength="50" />
	<input type="button" name="btnSuche" value="Suchen" onclick="highlight();" />
</p>
<div id="inhalt">

	<div>
	Hallo zusammen...
	<br />
	Ich hoffe ich bin bei Euch richtig. Habe ein für mich doch recht schwieriges Problem zu lösen.
	<br />
	Problemstellung: Da sich auf einer einzigen Seite viele viele Anweisungen und Inhalte befinden, muss diese nach Schlagwörtern durchsuchbar sein. Zwecks der Übersichtlichkeit sind allerdings die Themen als solche "eingeklappt" und klappen nur durch einen Klick auf die Überschrift (wie man es beispielsweise bei FAQs kennt) auf. Andernfalls wächst die Seite ins bodenlose. Entsprechende Anker fürs hin- und herspringen usw. sind gesetzt und funktionieren.
	<br />
	Jetzt brauche ich aber sowohl ein Suchfeld, als auch eine M&ouml;glichkeit, eben auch diese ausgeklappten/ausgeblendeten Inhalte auf ein Schlagwort zu durchsuchen und ggf. den betreffenden Part in dem sich das Suchergebnis befindet auszuklappen und zu markieren.
	Dazu kommt noch, dass nicht alle Ergebnisse auf einmal ausgegeben werden sollen, sondern so wie bei einer 0815-Suche per Strg+F immer schön der Reihe nach pro "Suche drücken"...bis ich am gewünschten Fleck bin. Das Suchfenster muss dann natürlich immer mit runter wandern bzw. konstant in der oberen Ecke bleiben. Wie eben jede normale Strg+F-Suche.
	<br />
	Oh Gott..es ist hoch schwer das zu beschreiben... aber ich hoffe ich habe mich halbwegs verständlich ausgedrückt.
	Dass das mit Javascript zu bewältigen sein soll habe ich schon erfahren... es happert allerdings gewaltig an der Umsetzung.
	<br />
	Über Hinweise wäre ich sehr dankbar... und ich bin relativer Anfänger. Haut mir bitte keine extremen Fachbegriffe um die Ohren.
	</div>

</div>

Die Suche und das Markieren klappt damit ohne Probleme. Allerdings ist mir noch nichts eingefallen wie die nicht sichtbaren Bereiche in die Suche einbezogen werden können.

 

[Nusspli]

Uff... vielen vielen Dank. Das hilft mir schon mal gut weiter.

Allerdings, wie immer, ist damit ein kleines Problem gelöst...und die nächsten zwei warten.

Das erste:
Er gibt in der Suche auch Treffer aus, die nicht in dem div sind und schreibt die dann unter das Suchfeld. Siehe Bild.

Umgehen kann ich das wohl nur, indem ich die Unterpunkte umbenenne..bzw. lieber durchnummeriere als die Begriffe zu verwenden.
Also eig. kein wirkliches Problem.
e²:/ es sind die selbst eingefügten Ankerpunkte die ich entsprechend benannt habe, die zusätzlich ausgegeben bzw. markiert werden..obwohl diese eigentlich nicht sichtbar sind. Ich benenne die jetzt einfach in X,Y,Z usw. um...damit hat sichs.

Das zweite:
Er findet einen Treffer weiter unten im Blatt (dürfte in der Endversion die Regel werden) und markiert ihn auch erstklassig, springt dort aber nicht hin. Dazu müsste zusätzlich auch die Suche mitgenommen werden. Weißt wie ich meine? Das Suchfenster z.B. nach links oben in die Ecke zu verfrachten sollte ich auch schaffen...aber die muss halt dann mit zur Fund-position mit hüpfen.

Nochmal vielen vielen Dank für die Hilfe... damit bin ich ein gutes Stück weiter.

e:/ ich verstehe leider nicht so ganz, was mit der Suche jetzt effektiv durchsucht wird. Er findet zwar meine Testschlagwörter die ich eingebe... sogar die, die eig. nicht sichtbar sind (siehe Problem 1 oben). Auf der anderen Seite ist auch mehrfach das Wort "zurück" (als zurück zum Seitenfang) enthalten. Das findet er nicht, obwohl es sowohl innerhalb des div steht, als auch auf der Seite sichtbar ist. Mysteriös...

 

[tombe]

zu 1):
In meinem Beispiel umschließt der Container mit der ID "inhalt" alles das was bei der Suche berücksichtigt werden soll. Hast du das beachtet als du es auf deiner Seite getestet hast?

Ich habe bei mir irgendwo auf der Seite einen Satz geschrieben und dann nach einem Wort gesucht der sowohl im "freien" Bereich als auch innerhalb des DIVs stand. Es wurde nur der Text im DIV durchsucht!

zu 2):
Das Springen zu der Stelle innrhalb der Seite ist ja im Beispiel noch gar nicht vorhanden. Ich wollte jetzt erstmal die Suche selber hinkriegen! Es sollte aber zu lösen sein indem man in de JS Funktion einen Anker an die Stelle setzt und diesen dann anspringt.

Diesen Teil der Zeile:

"<span style='color: red;  font-weight: bolder;'>" + orig.substring(start, ende) + "</span>"

einfach so abändern:

"<span style='color: red;  font-weight: bolder;'><a name='treffer'>" + orig.substring(start, ende) + "</a></span>"

und dann noch das hier ergänzen:

document.getElementById('inhalt').innerHTML = neu;
location.href = "#treffer";

 

[Nusspli]

Vielen vielen Dank...schon wieder... für die Hilfe.

Und wieder stehe ich vor einem Problem, bei dem ich nicht mal weiß warum es überhaupt auftritt.
Habe selbst über die Anker das Springproblem lösen können... und hab jetzt allerdings zu deiner Variante abgeändert.
und tadaaa... die Treffer werden nicht mehr so schön rot markiert, sondern in einem hässlichen graugrünblau-Ton. Es ist alles andere unverändert...und vorher wars auch schön rot.

Also da häng ich jetzt grad sehr.

Dass dann die Suche + Button selbst ebenfalls per Anker immer an die letzte Trefferstelle springt, dürfte auch nicht so kompliziert sein, oder?

e:/ jetzt ists wieder rot, wird aber über css gesteuert, nicht über die html-Anweisung. Wo der Haken ist, weiß ich leider nicht.

 

[tombe]

So ich bin einen Schritt weiter. Im neuen Beispiel gibt es Bereiche die mit CSS ausgeblendet sind. Bei der Suche werden diese Bereiche ebenfalls durchsucht und im Falle eines Treffers eingeblendet.

Es werden auch nicht mehr alle DIVs durchsucht sondern nur diejenigen bei denen class="xxx" angegeben ist. Im Beispiel sind einige Abschnitte die einen anderen Klassennamen haben. Der dort enthaltene Text wird nicht duchsucht. Dadurch hast du die Möglichkeit Texte die nicht durchsucht werden sollen auszuschließen.

<script language="javascript" type="text/javascript">
var orig = "";
var start = 0;
var div_count = 0;

function highlight () {
suche = document.getElementById("txtSuche").value.toLowerCase();

if (orig == "") {
	orig = document.getElementById("inhalt").innerHTML;
} else {
	document.getElementById("inhalt").innerHTML = orig;
}

if (div_count >= document.getElementsByTagName('div').length) {
	div_count = 0;
	start = 0;
	return;
}

if (document.getElementsByTagName('div')[div_count].className == "xxx") {
	text = document.getElementsByTagName('div')[div_count].innerHTML.toLowerCase();
	orig_text = document.getElementsByTagName('div')[div_count].innerHTML;
	start = text.indexOf(suche, start);
	if (start == -1) {
		div_count = div_count + 1;
		start = 0;
		highlight();
		return;
	}

	ende = start + suche.length;
	neu = orig_text.substring(0, start) + "<span style='color: red;  font-weight: bolder;'><a name='treffer'>" + orig_text.substring(start, ende) + "</a></span>" + orig_text.substring(ende);
	document.getElementsByTagName('div')[div_count].innerHTML = neu;
	start = ende;
	location.href = "#treffer";
	document.getElementsByTagName('div')[div_count].style.display = "block";
} else {
	div_count = div_count + 1;
	start = 0;
	highlight();
}

if (div_count >= document.getElementsByTagName('div').length || start == -1) {
	div_count = 0;
	start = 0;
}

}

function reset (){
	start = 0;
	div_count = 0;
}
</script>

<p>
	<input type="text" name="txtSuche" id="txtSuche" value="" size="20" maxlength="50" onchange="reset();" />
	<input type="button" name="btnSuche" value="Suchen" onclick="highlight();" />
	<br />
	Die Begriffe "da", "dort", "und", "nicht" und "die" kommen in den nicht sichtbaren Bereichen vor.
</p>
<p></p>
<hr />
<p></p>
<div id="inhalt">
	<div class="xxx">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</div>
	<hr />
	<div class="xyz"><b>xyz</b> - Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.</div>
	<hr />
	<div class="xxx" style="display: none;"><b>Ist zuerst nicht sichtbar.</b>Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</div>
	<hr />
	<div class="xxx">Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</div>
	<hr />
	<div class="xxx">Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</div>
	<hr />
	<div class="xxx" style="display: none;"><b>Ist zuerst nicht sichtbar.</b>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</div>
	<hr />
	<div class="xxx">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</div>
	<hr />
	<div class="xyz"><b>xyz</b> - Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</div>
	<hr />
	<div class="xxx">Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</div>
	<hr />
	<div class="xxx">Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein</div>
</div>

Warum bei dir plötzlich die Farben nicht mehr gestimmt haben kann ich so nicht sagen ohne den Code zu sehen. Hat sich ja aber wohl erledigt.