Browsersuche nutzen, aber ohne Reload der Seite

Willkommen, Gast

(1 Leser) (1) Gast

Auf Thema antworten

Neues Thema

Seite:
1
2

THEMA: Browsersuche nutzen, aber ohne Reload der Seite

Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 11 Monate her #8786

TorstenHI
OFFLINE
Fresh Boarder
Beiträge: 7
Karma: 0

Hey,

ich möchte gerne auf einer Seite die Brosersuche (STRG+f) nutzen.
Dazu verwende ich folgendes Skript:

<script type="text/javascript">
function suchen () {
var range = document.body.createTextRange();
var found = range.findText(document.theform.SuchNach.value);
range.select()

}
</script>

<FORM name="theform" action="" >
<input type="text" name="SuchNach"></TD>
<input type="button" value="suchen" onClick="suchen()">
</form>

Wenn ich nun im Suchfeld etwas eingebe & auf den Button klicke funktioniert die Suche wie gewünscht.

2 Probleme gibt es:

1) Wenn ein Nutzer ein Suchwort eingibt + RETURN drückt (statt auf den Button zu klicken), dann wird die aktuelle Seite neu geladen und die Suche nicht durchgeführt. Kann man das irgendwie ändern?

2) Gefunden wird immer nur das erste Wort auf der Seite, welches dem Suchbegriff entspricht. Gibt es eine Möglichkeit, dies zu erweitern (z.B. F3 Taste) um weiterzusuchen?

Gruß
Torsten

Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 11 Monate her #8793

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

Hallo,

also das mit der RETURN-Taste lässt sich wahrscheinlich nicht ändern, weil das eine fixe, im Browser eingebaute, Funktion ist.

Was das Weitersuchen angeht, das kann man schon machen. Ich hab dir deinen Code einmal so umgeschrieben, dass er bei erneutem Suchen nach dem selben Text automatisch den nächsten Treffer markiert

Hier der Code:

<script type="text/javascript">
<!--
var range;
var letzte_Suche = "";

function suchen()
{
if(document.theform.SuchNach.value)
{
if((!range)||(letzte_Suche!=document.theform.SuchNach.value))
range = document.body.createTextRange();
else
range.collapse(false);

if(document.body.createTextRange().text.indexOf(document.theform.SuchNach.value)>-1)
{
var found = range.findText(document.theform.SuchNach.value);

if(!found)
{
range = document.body.createTextRange();
range.findText(document.theform.SuchNach.value);
}
range.select();
}
else
{
alert("Keine passenden Treffer gefunden.");
}
}
letzte_Suche = document.theform.SuchNach.value;
}
//-->
</script>

Ich hoffe, ich konnte dir helfen

liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!

Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 11 Monate her #8797

TorstenHI
OFFLINE
Fresh Boarder
Beiträge: 7
Karma: 0

Hey Super Mario,

also dein Name in allen Ehren. Bist mit Sicherheit "mein Held des Tages".
Ich habe das Skript noch etwas angepasst und das Formular einfach entfernt. Variablen Werte habe ich dann mit document.getElementById('SuchNach').value ersetzt. So habe ich auch keinen Reload mehr

Deine Hilfe hat mir sehr weitergeholfen.

Gibt es noch eine Möglichkeit das onClick Ereignis über eine Tastenkombination z.B. F8 aufzurufen? Ich habe nun das Problem, dass mein Eingabefeld oben auf der Seite stehen bleibt und der Benutzer immer wieder nach oben scollen muss, um den Button erneut zu klicken.

Liebe Grüße zurück
Torsten

Letzte Änderung: 1 Jahr, 11 Monate her von TorstenHI.

Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 11 Monate her #8799

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

Hallo,

ja, das mit der Taste lässt sich auch machen

Ich hab dir den Code einmal so umgeschrieben, dass die Suchfunktion jetzt auch bei F8 ausgeführt wird.

Hier der Code:

Den neuen Teil hab ich hier rot eingefärbt

Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 10 Monate her #8813

TorstenHI OFFLINE Fresh Boarder Beiträge: 7 Karma: 0	Hey, war in der letzen Woche im Urlaub, sodass ich deine Antwort erst heute gelsen habe. Super. Jetzt funktioniert alles perfekt. Vielen Dank. Gruß Torsten
	Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 10 Monate her #8814

Super_Mario OFFLINE Platinum Boarder Beiträge: 623 Karma: 35	Gerne
	liebe Grüße Super Mario Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide! Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 9 Monate her #8885

lars-sh
OFFLINE
Fresh Boarder
Beiträge: 4
Karma: 0

Super_Mario schrieb:

also das mit der RETURN-Taste lässt sich wahrscheinlich nicht ändern, weil das eine fixe, im Browser eingebaute, Funktion ist.

Um darauf nochmal kurz einzugehen:

Den Funktionaufruf "suchen()" anstatt des onclicks des inputs als onsubmit der form.
Den input type von "button" auf "submit" ändern.
In das onsubmit event "return false;" einfügen.

Folglich (gekürzte Version!):

<form onsubmi="suchen(); return false;"><input type="submit"></form>

So, jetzt wissen wir das für spätere Aktionen

Schöne Grüße,
Lars Knickrehm

Letzte Änderung: 1 Jahr, 9 Monate her von lars-sh.

Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 8 Monate her #9034

TorstenHI OFFLINE Fresh Boarder Beiträge: 7 Karma: 0	Hey, die Suche ist nun Case-Sensitive. Kann man das noch irgendwie deaktivieren, sodass der Benutzer Suchbegriffe bekommt, auch wenn die Groß- / Kleinschreibung nicht stimmt? Vielleicht kann mir jemand hier helfen. Ansonsten arbeitet das Skript einfach traumhaft Gruß Torsten
	Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 8 Monate her #9035

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

Ja, lässt sich machen

Hier ist der Code ohne Case Sensitive:

<script type="text/javascript">
<!--
var range;
var letzte_Suche = "";

function suchen()
{
if(document.theform.SuchNach.value)
{
if((!range)||(letzte_Suche!=document.theform.SuchNach.value))
range = document.body.createTextRange();
else
range.collapse(false);

if(document.body.createTextRange().text.toLowerCase().indexOf(document.theform.SuchNach.value.toLowerCase())>-1)
{
var found = range.findText(document.theform.SuchNach.value);

if(!found)
{
range = document.body.createTextRange();
range.findText(document.theform.SuchNach.value);
}
range.select();
}
else
alert("Keine passenden Treffer gefunden.");
}
letzte_Suche = document.theform.SuchNach.value;
}
function Taste(Ereignis)
{
if(!Ereignis)
Ereignis = window.event;
if(Ereignis)
{
if((Ereignis.which==119)||(Ereignis.keyCode==119))
suchen();
}
}
document.onkeydown = Taste;
//-->
</script>

Letzte Änderung: 1 Jahr, 8 Monate her von Super_Mario.

Antwort Zitieren

Aw: Browsersuche nutzen, aber ohne Reload der Seite 1 Jahr, 8 Monate her #9036

TorstenHI OFFLINE Fresh Boarder Beiträge: 7 Karma: 0	Hey Super Mario, ich habe den kompletten Quelltext ersetzt. Leider funktioniert die Suche nun gar nichts mehr. Wo liegt der Fehler? Sonnige Grüße Torsten
	Antwort Zitieren