Eingabefeld in Website integrieren

J.B · 17 April 2014

Für ein Schulprojekt benötige Ich ein wenig Hilfe. Ich habe vor, eine Website (ein Glossar zum Thema Photosynthese) zu schreiben. Zum größten Teil ist diese auch schon fertig, doch nun habe Ich mir überlegt, ein Eingabefeld einzubringen, das als ein Suchfeld agieren soll. Wenn man also dort einen Begriff eingibt, soll der Bildschirminhalt zu einer Sprungmarke im Dokument springen, was die Übersichtlichkeit enorm steigern würde.

Wie gesagt, Ich bin noch ziemlicher Neuling und wäre sehr froh, wenn mir hier Jemand bei meinem Problem helfen könnte.

M.f.G.
J.B

Chronos · 17 April 2014

Hi,

muss es ein Suchfeld sein? Sprungmarken kannst du nämlich auch einfach über normale Links realisieren.
Als Beispiel folgendes:

HTML:

<a href="DerLinkZuDeinerSeite#jumpto">Katzenarten</a>
<h1 id="jumpto">Katzenarten und ihre Eigenheiten</h1>

Das wäre die Methode über einen Link, wenn du hier auf "Katzenarten klickst", springt es zur h1 mit der id "jumpto".

Über ein Suchfeld könntest du es z. B. über JavaScript machen, wäre aber evtl. auch nicht so sehr geeignet dafür, da du ja eh im Glossar eine Liste mit Links haben wirst, bzw. Links daraus machen kannst.

J.B · 17 April 2014

Danke für die schnelle Antwort, doch müsste es schon ein Suchfeld sein. Über normale Links habe Ich dies bereits realisieren können.

Chronos · 17 April 2014

Okay jetzt kommt es drauf an wie gut du JavaScript kannst.

Du müsstest folgende Dinge tun:
1. Den Wert aus dem Suchfeld verarbeiten und diesem ein "'#" voranstellen
2. Ein Click-Event auf einen Suchbutton legen
3. Eine Funktion schreiben die zu deinem Ankerpunkt scrollt

Ich zeige dir mal die jQuery-Variante, bei der ganz normalen JavaScript Variante müsstest du noch ein wenig selbst machen ;)

HTML:

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="./scroll.js"></script>
  </head>

  <body>
    <input type="text" id="txt-scroll-to" placeholder="Suchen Sie im Glossar">
    <a href="#" id="btn-search">Suche</a>
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
    <h1 id="mittens">Mittens</h1>
    <h1 id="maru">Maru</h1>
  </body>
</html>

Die ganzen <br> sind bei mir nur dazu da, in der Höhe etwas Platz zu haben, damit auch gescrollt wird.

und die JavaScript-Datei:

Code:

(function($, window, document) {
    $(function() {      
        // Suchfeld
        var txt_scroll_to   = $('#txt-scroll-to');
        // Such-Button
        var btn_search      = $('#btn-search');

        // "Eventlistener" für das Event "click" auf unserem Such-Button
        btn_search.on({       
            "click": function() {
                // Suchwert in Variable schreiben
                var suchwert = txt_scroll_to.val();
                // Funktion zum scrollen aufrufen
                jQueryScrollTo(suchwert);
            }         
        });
     
        // JS-Version
        function jsScrollTo(anchor) {
            location.anchor = "#" + anchor;
        }
     
        // jQuery-Version
        function jQueryScrollTo(anchor) {             
            $('html, body').animate({
                'scrollTop': $('#' + anchor).offset().top
            }, 1000);         
        }
     
    });
}(window.jQuery, window, document));

Bei der ganz normalen JavaScript Variante müssstest du noch (am besten selbst) herausfinden, wie du ein Event auf ein Element legst und wann du wie dein JavaScript einbindest.

Hilft dir das erstmal?

Banana_Jones · 17 April 2014

Was nun aber keine Suche im eigentlichen Sinne ist, da man ja genau den Anker eingeben muss, um zu dem Bereich zu gelangen. Das wird dem User allerdings kaum gelingen, und ohne Fehlermeldung ist er ziemlich hilflos.

Wenn man jetzt keine "echte" Suche implementieren will, könnte man zumindest aus Gründen der Usability eine Autocomplete-Funktion verwenden. Diese kann dann dem User die richtigen Ankerbegriffe vorschlagen. Dann wird auch deutlich, ob der eingegebene Begriff tatsächlich auch existiert.

Chronos · 17 April 2014

Jap, das ist natürlich klar. Eine Fehlermeldung wäre ja unabdingbar mit dieser Variante, aber das sollte er ja schaffen ;).

Alles andere wie Autocomplete ist vermutlich für ihn zu komplex (nehme ich mal an, weiß ja nicht wie viel er schon kann) bzw. gibt es ja auch ein Autocomplete in jQuery UI. Aber erst mal warten, was er dazu sagt :)

J.B · 18 April 2014

Danke,
Ich denke, dass dies genau ist, was Ich gesucht habe und dazu sieht der (HTML-)Code eigentlich auch sehr schlüssig aus. Nur woran liegt es, dass die Suche noch nicht funktioniert.
In der Adresszeile richtet die "Suche" zwar eine Sprungmarke (#) ein, doch wenn Ich bspw. "maru" eingebe schließt sich dies nicht an, d.h. es springt nicht wie es sollte.

scbawik · 18 April 2014

Chronos schrieb:

Okay jetzt kommt es drauf an wie gut du JavaScript kannst.

Du müsstest folgende Dinge tun:
1. Den Wert aus dem Suchfeld verarbeiten und diesem ein "'#" voranstellen
2. Ein Click-Event auf einen Suchbutton legen
3. Eine Funktion schreiben die zu deinem Ankerpunkt scrollt

Ich zeige dir mal die jQuery-Variante, bei der ganz normalen JavaScript Variante müsstest du noch ein wenig selbst machen ;)

HTML:

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="./scroll.js"></script>
  </head>

  <body>
    <input type="text" id="txt-scroll-to" placeholder="Suchen Sie im Glossar">
    <a href="#" id="btn-search">Suche</a>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <h1 id="mittens">Mittens</h1>
    <h1 id="maru">Maru</h1>
  </body>
</html>

Die ganzen <br> sind bei mir nur dazu da, in der Höhe etwas Platz zu haben, damit auch gescrollt wird.

und die JavaScript-Datei:

Code:

(function($, window, document) {
    $(function() {    
        // Suchfeld
        var txt_scroll_to   = $('#txt-scroll-to');
        // Such-Button
        var btn_search      = $('#btn-search');

        // "Eventlistener" für das Event "click" auf unserem Such-Button
        btn_search.on({     
            "click": function() {
                // Suchwert in Variable schreiben
                var suchwert = txt_scroll_to.val();
                // Funktion zum scrollen aufrufen
                jQueryScrollTo(suchwert);
            }       
        });
   
        // JS-Version
        function jsScrollTo(anchor) {
            location.anchor = "#" + anchor;
        }
   
        // jQuery-Version
        function jQueryScrollTo(anchor) {           
            $('html, body').animate({
                'scrollTop': $('#' + anchor).offset().top
            }, 1000);       
        }
   
    });
}(window.jQuery, window, document));

Bei der ganz normalen JavaScript Variante müssstest du noch (am besten selbst) herausfinden, wie du ein Event auf ein Element legst und wann du wie dein JavaScript einbindest.

Hilft dir das erstmal?

müsste es nicht

Code:

location.hash

statt

Code:

location.anchor

heißen?

Chronos · 18 April 2014

J.B schrieb:
Danke,
Ich denke, dass dies genau ist, was Ich gesucht habe und dazu sieht der (HTML-)Code eigentlich auch sehr schlüssig aus. Nur woran liegt es, dass die Suche noch nicht funktioniert.
In der Adresszeile richtet die "Suche" zwar eine Sprungmarke (#) ein, doch wenn Ich bspw. "maru" eingebe schließt sich dies nicht an, d.h. es springt nicht wie es sollte.

Also damit es scrollt, muss es auch außerhalb des sichtbaren Bereiches sein. Ansonsten fällt mir dazu spontan nichts ein^^.
Wenn du eine richtige Suche mit Vorschlägen willst, solltest du dir das ansehen:
http://jqueryui.com/autocomplete/

Damit das geht müsstest du das Beispiel der Seite aber so anspassen das in dem Array deine ganzen Anchor Punkte von dir eingetragen werden ODER
was viel besser wäre du gehst das DOM durch, und speicherst die Einträge in einem Array, das wäre auch noch eine Möglichkeit. Je nach dem.

Chronos · 18 April 2014

scbawik schrieb:
müsste es nicht

Code:

location.hash

statt

Code:

location.anchor

heißen?

Ja das hatte ich doch schon editiert ^^, also bei mir wird es richtig angezeigt.

Chronos · 20 April 2014

.hash ist richtig, warum ich jetzt gar nichts mehr editieren kann kA -.-

Eingabefeld in Website integrieren

J.B

Neues Mitglied

Chronos

Aktives Mitglied

J.B

Neues Mitglied

Chronos

Aktives Mitglied

Banana_Jones

Aktives Mitglied

Chronos

Aktives Mitglied

J.B

Neues Mitglied

scbawik

Senior HTML'ler

Chronos

Aktives Mitglied

Chronos

Aktives Mitglied

Chronos

Aktives Mitglied

Neueste Beiträge