Treffer durch Suche innerhalb eingeklappter Inhalte

tombe

Erfahrenes Mitglied
So was gestern noch gefehlt hat war das die Suchmaske immer zu sehen ist. Deshalb diesen Teil:
HTML:
<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>

einfach so ändern:

HTML:
<div style="position: fixed; z-index: 1; width: 250px; bottom: 0px; right: 0px; padding: 5px; background-color: #C0C0C0;">
	<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.
</div>

Damit wird die Suchmaske fest unten rechts im Fenster positioniert und bleibt auch beim Scrollen dort. Du musst jetzt halt schauen wo für dich der beste Platz ist und entsprechend die CSS Angaben ändern.
 

Nusspli

Mitglied
Uff... du machst ja hier fast meine ganze Arbeit. :)
Die beiden letzten Posts haben mir wieder sehr geholfen.... und habe alles gleich entsprechend eingefügt und angepasst.

Was ich allerdings bei der neuen Version vermisse, ist die Textausgabe für den Fall, es wurde kein Treffer gefunden oder das Dokument ist fertig untersucht.

Code:
start = text.indexOf(suche, start);
if (start == -1) {
    start = 0;
    alert("Das Ende der Seite wurde erreicht oder der Suchbegriff wurde nicht gefunden!");
    return;
}

Das funktioniert zwar, gibt aber die Fehlermeldung mehrfach hintereinander aus.

An einer Suche per "Enter" denke ich auch gerade, zusätzlich zum klicken per Maus auf den Button. Aber das dürfte ich wohl hinbekommen...hoffe ich oO

Nochmal vielen vielen Dank für die ganze Mühe die du dir machst...
 

Nusspli

Mitglied
Oh Gott..jetzt beissts aus... neben dem Problem mit dem fehlenden Hinweis bei Suchende, habe ich jetzt noch ein weiteres: die Suche findet den Treffer, klappt aber den Baustein nicht aus.

Arbeite ebenfalls mit dem typischen Script für ein-/ausblenden. Die Suche scheint dieses Script nicht zu beeinflussen, bleibt also eingeklappt.

Code:
<script language="javascript">
function toggle(control)
{
var elem = document.getElementById(control);
if(elem.style.display == "none")
{
elem.style.display = "block";
}
else
{
elem.style.display = "none";
}
}
</script>


HTML:
	<div class="xxx">
		&nbsp;<h2>Basis / Allgemein</h2>
		<span class="auto-style2">
		<a href="javascript:toggle('thema1')" style="text-decoration: none; color: #FFFFFF;">Thema 1</a></span>
		<div  id="thema1" style="DISPLAY: none">
		<p style="color: #FFFFFF">Hier stehen später eingebaute Textbausteine, Informationen und 
		Bilder. Auch eingeklappt müssen diese Inhalte durchsuchbar bleiben und bei Treffer automatisch aufklappen.</p>
		<p>test</p>
		</div>

Da die Suche selbst funktioniert, liegt der Fehler wohl nicht daran, dass ich einmal ein div mit "xxx" defniere und innerhalb nochmal eine div id "thema1" vergebe.

Wie gesagt...Suche klappt, aufklappen dagegen leider nicht. Das manuelle aufklappen dagegen wieder schon. :)

Es ist also schon mal ein riesengroßer Fortschritt, dass ausgeblendete Inhalte durchsucht und die Treffer markiert werden. Jetzt fehlen nur noch die (hoffentlich) Kleinigkeiten und die eigentliche Arbeit kann starten. :)

Ich bekomme Kopfschmerzen..xD
 
Zuletzt bearbeitet:

tombe

Erfahrenes Mitglied
Also was die Meldung angeht, dazu einfach den unten stehenden IF-Block um die angegebene Zeile erweitern:

Javascript:
if (div_count >= document.getElementsByTagName('div').length) {
    div_count = 0;
    start = 0;
//diese Zeile eintragen, dann wird die Meldung ausgegeben
    alert("Das Ende der Seite wurde erreicht oder der Suchbegriff wurde nicht gefunden!");
    return;
}

Das der Treffer nicht aufgeklappt wird, liegt daran das du den Klassennamen an der falschen Stelle angegeben hast.
Alles was durchsucht werden soll muss a) innerhalb eines DIV-Containers stehen und b) dieser muss den Eintrag class="xxx" enthalten.

HTML:
<div class="wird_nicht_durchsucht">Überschrift über der Liste der Themen</div>

<div class="xxx" style="display: none;">
    Thema 1:
    Text zum Thema 1 der ausgeblendet sein kann und der durchsucht wird. Wird der gesuchte Text hier gefunden, wird er sichtbar.
</div>

<div class="xxx">
    Thema 2:
    Die Beschreibung des zweiten Themas. Hier gilt das gleiche wie bei Thema 1.
</div>

<div class="xxx">Thema 3: dto.</div>

<div class="xxx">Thema 4: dto.</div>

<div>Ende der Themen - Dieser Text wird nicht durchsucht.</div>
 

Nusspli

Mitglied
Und wieder ein danke schön für die Hilfe...

Die DIV-container und Benennung dieser ist alles schon erledigt und klappte nur mit deinem Code einwandfrei... auch das aufklappen.

Da ich aber nicht ausschließlich durch Suchbegriffstreffer aufklappen können soll, musste ich ein zweites Script für das stinknormale auf-/zuklappen einbinden... auch das funktioniert soweit. Aber seitdem klappt eben ein Treffer den Punkt nicht mehr automatisch auf.
Entferne ich das zweite Script und den Bezug dazu, klappt es wieder einwandfrei.

Hier tüftle ich gerade noch, komme aber mal wieder auf keinen grünen Zweig.

e:/ ggf. wenns dich interessiert, würde ich dir den kompletten Code auch gerne per Mail hier zur Verfügung stellen?

e2:/ Ich sage bei dem zweiten Script generell, dass alle Bezüge eingeklappt sein sollen... hier ist keine Variable drin die sagt, wenn etwas dort markiert ist bzw. ein Treffer gefunden ist, dass sich dieses display: none in true ändert.
 
Zuletzt bearbeitet:

tombe

Erfahrenes Mitglied
Ich weiß woran es liegt aber ich weiß noch nicht wie es zu lösen ist.

In der Variable "orig" wird der Quellcode gespeichert damit die Formatierung der Treffer wieder aufgehoben werden kann.

Wird jetzt manuell etwas aufgeklappt (oder auch geschlossen) dann sind diese Angaben nicht in "orig" enthalten. Es kann also passieren das beim Suchen etwas wieder aufgeklappt wird obwohl du es geschlossen hast oder es wird geschlossen obwohl du es zuvor manuell geöffnet hast.

Wie gesagt im Moment hab ich keine Idee, aber der Tag ist ja noch lang!
 

tombe

Erfahrenes Mitglied
So langsam werden die Probleme weniger. Ändere die Funktion "toolge" bitte wie folgt ab:

Javascript:
function toggle(control) {
var elem = document.getElementById(control);
// diese Zeile ist neu!
if (orig != "") document.getElementById("inhalt").innerHTML = orig;

if(elem.style.display == "none") {
	elem.style.display = "block";
} else {
	elem.style.display = "none";
}

dann klappt es mit dem Auf- und Zuklappen. Allerdings werden die händisch aufgeklappten Bereiche beim Suchen geschlossen. Aber ich denke damit kann man leben!?


Was ich in deiner Datei gesehen habe ist das du den Javascript-Bereich doppelt definiert hast.

Javascript:
<script language="javascript" type="text/javascript">
// im ersten Bereich steht sein Code
</script>
<script language="javascript" type="text/javascript">
// und im zweiten der von mir
</script>

Es wird wohl kein Fehler im eigentlichen Sinn sein, aber korrekt ist es auf jeden Fall nicht. Außerdm steht dein JS-Code "mitten in der Seite". Normalerweise kommt das zwischen "<head>" und "</head>". Würde ich auch noch ändern!

Gleiches gilt für "<style type="text/css"></style>", auch das ist doppelt enthalten.

So und ganz zum Schluß: du hast id="container" auch doppelt!
 

Nusspli

Mitglied
Danke. :)

Ich habe die Änderungen soweit übernommen..^^

Leider funktioniert das Ganze nicht wirklich. Zum einen ist ein manuelles ein-/ausklappen nicht mehr möglich, sobald die Suche 1x durchgeführt wurde.
Und auch das automatische aufklappen bei einem Treffer funktioniert leider nicht mehr.
 

tombe

Erfahrenes Mitglied
Jetzt habe ich so viel herumprobiert das ich selber nicht mehr weiß was wirklich geholfen hat.

Mit diesem Javascript klappt bei mir jetzt scheinbar alles:

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

function toggle(control) {

if(document.getElementById(control).style.display == "none") {
	document.getElementById(control).style.display = "block";
} else {
	document.getElementById(control).style.display = "none";
}

}

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;
    alert("Das Ende der Seite wurde erreicht oder der Suchbegriff wurde nicht gefunden!");
    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>

Die gekürzte Version der einzelnen Themen sieht bei mir so aus:

HTML:
<div id="inhalt">
	<div><a name="Basis"></a>
		<h2>Basis / Allgemein</h2>
		<span class="auto-style2"><a href="javascript:toggle('thema1')" style="text-decoration: none; color: #FFFFFF;">Thema 1</a></span>
		<div id="thema1" style="display: none; color: #FFFFFF;" class="xxx">
			<p>Hier stehen später eingebaute Textbausteine, Informationen und Bilder. Auch eingeklappt müssen diese Inhalte durchsuchbar bleiben und bei Treffer automatisch aufklappen.</p>
			<p>test 1</p>
			<p>test 2</p>
			<p>test 3</p>
		</div>
	</div>
	<a href="default.html#Top" style="color: #FFFFFF">zurück</a>
	<div><a name="Finanzierung"></a>
		<h2>Finanzierung</h2>
		<span class="auto-style2"><a href="javascript:toggle('thema2')" style="text-decoration: none; color: #FFFFFF;">Thema 2</a></span>
		<div id="thema2" style="display: none; color: #FFFFFF;" class="xxx">
			<p>Hier der Text zum Thema 2.</p>
			<p>Test zum Thema 2.1</p>
			<p>Test zum Thema 2.2</p>
			<p>Test zum Thema 2.3</p>
		</div>
	</div>
</div>

Schau mal was passiert wenn du es so übernimmst.
 

Nusspli

Mitglied
Jaaaa... :) Es funktioniert mit dem ein-/ausklappen so wie es soll...

Eine kleine Sache fehlt jetzt in der neuen Version allerdings: die Treffer werden nicht mehr angesprungen. Ehrlich gesagt trau ich mich mittlerweile echt nicht mehr, da rum zu pfuschen. Wenn die Sprungpunkte noch gesetzt werden, ist das absolut perfekt. oO