✔ Suchfunktion für HTML

DexXxtrin

DexXxtrin

Erfahrenes Mitglied
Hallo zusammen

Ich hoffe Javascript & Ajax ist der richtige Ansatz.
Folgendes Problem:
Ich habe in einem Ordner mehrere HTML Dateien für eine Homepage. Die Homepage läuft nicht auf einem Webserver, weshalb PHP nicht funktioniert (HTML Dateien werden einfach im Browser angezeigt).
Nun sollte ich dafür eine Suchfunktion erstellen, so dass nach Wörtern gesucht werden kann, und dann die entsprechende HTML-Datei angezeigt wird.
Wie kann ich das lösen?
Meine Idee ist, einfach alle HTML-Dateien nach dem Keyword zu scannen, aber wie?

Gruss DexXxtrin
 
Hi

sollen die Files immer lokal bleiben oder irgendwann auch auf einem Webserver funktionieren?
Um welchen Browser gehts?
SInd alle Dateinamen fix&bekannt oder soll der Ordner auch per JS nach Dateien durchsucht werden können?
SInd die Inhalte überhaupt so variabel, dass man nicht zuerst außerhalb
vom Browser (aber schon automatisiert) einen Suchindex für JS erstellen könnte?
 
Bevorzugt wird natürlich eine Lösung, die für beides funktioniert.

Es geht nicht um einen bestimmten Browser, da verschiedene Nutzer darauf zugreiffen (Netzlaufwerk).

Dateinamen wären eigentlich fix&bekannt (bzw. selten Änderungen), handelt sich jedoch um >50 Dateien, daher wäre eine automatisierte Durchsuchung angenehmer.

Inhalte sind mässig variabel, das meiste ändert sich höchst selten, nur gewisse Sachen werden etwas häufiger geändert.
 
Also, eine wirklich einfache Lösung kenn ich da nicht.
Es scheitert schon daran, dass man lokal nicht einfach so auf beliebige andere Dateien zugreifen kann.

Wenn es unbedingt lokal ohne Webserversoftware bleiben muss, wäre meine erste Reaktion, in einer allgemeinen Programmiersprache etwas zu schreiben, das die Dateien durchgeht, und einen Suchindex in JS-Array-Syntax in eine Textdatei erstellt. Diese JS-Datei dann jeweils in den HTMLs dazu mit einbinden, und das Tool regelmäßig ausführen damit der Index immer wieder aktualisiert wird.
(Weiß nicht, ob es so ein Tool nicht schon irgendwo gibt, gefunden hab ich grad nichts, aber auch nicht lang gesucht)

Oder man installiert sich PHP lokal und verwendet dann eine Online-Lösung
(laut erstem Beitrag scheint das für dich ja eher machbar / einfacher zu sein?)
 
Mit der APi kann man nur mit Benutzermitwirkung auf Dateien zugreifen, nicht komplett automatisch.
(zB. wenn der Benutzer in einem "Upload"-artigen Formular eine Datei aussucht)
 
oder mehrere dateien...

aber meines wissens geht das mit js nicht ohne benutzermitwirkung,
das waere sehr fatal, wenn einer schadcode einschlaeust kann er ploetzlich das filesystem vom client auslesen und sich zusenden ;)

ansonsten bleibt natuerlich nur deine variante mit tool oder php/asp

ah was mir gerade auch noch einfaellt, wenn er die seite zum suchen der datei in den gleichen ordner packt kann er mit ajax nach und nach per schleife reinladen, haengt halt noch ein bischen von den dateinamen ab z.B. datei-xyz-1.html, datei-xyz-2.html, aber so koennte man das innerhtml von body nach dem keyword durchsuchen, wenn nicht vorhanden next file, wenn gefunden schleife abbrechen und seite in neuem tab/fenster ausgeben...

ist nur ein ansatz fuer ne js loesung und hat auch den nachteil, das mann, wenn neue files hinzu kommen den zaehler im js erhoehen muss und man ist noch von ner namensgebung der datei abhaengig...
 
schaut mal, ist ein bsp. , kann man natuerlich noch schoener machen... (aber mit js) ;)

HTML: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
      
        <title>Search</title>

        <script src="js/jquery-1.9.1.min.js" ></script>

        <script >
            var counter = 2, tmp = -1,i=0,found;
                $('document').ready(function() {
                    $('button').on('click', function(e){
                        for(;i<counter;) {
                            if(tmp==i)
                                continue;
                            tmp=i;
                            var h=1+i;
                            $.ajax({
                                url: "dat-xyz"+h+".html",
                                dataType: "text",
                                success: function(data) {
                              
                                    var x = data;
                                    if(x.search('Test1') > -1 ) {
                                        $('.searcher').html(x);
                                        i = 10000;
                                        found=true;
                                        return;
                                    }
                                    i++;
                                  
                                }
                            }).fail(function() { i++; });
                        }
                        if(!found)
                            $('.searcher').html('not in');
                    });
                });
        </script>
    </head>
    <body >
      
        <div id="swapper"><button>search</button></div>
        <div style=";" class="searcher"></div>
      
    </body>  
</html>

habe 2 html dateien erstellt und ordner abgelegt jeweils mit content im body -> Test1 und Test2...
habe kein input tag eingefuegt, das muesste man dann noch machen und pruefen ob da inhalt drin ist...
 
das ganze koennte man dann noch mit der file api verbinden, der user kann dann die dateien zum durchsuchen auswaehlen,
dann ist man nicht mehr an eine namensgebung gebunden und braucht sich auch nicht mehr um den counter zu kuemmern...
 
@sheel
Ich glaube das mit dem Suchindex in JS-Syntax ist wohl die beste Lösung.
Da ich noch nie so etwas gemacht habe: Was kommt alles in so einen Suchindex? Nimmt man da alle Wörter (natürlich nur länger als 3 Zeichen oder so), oder auf was achtet man da?

@Hyper Lord
Danke für deinen Ansatz. Aber wenn man bei jeder Suche die Files auswählen muss, finde ich das etwas mühsam. Ausserdem kann man diesen Vorgang nicht jedem DAU zumutenn ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück