Suche auf Website
Vay
- suche
- suchmaschinen
Hallo, Momentan versuche ich mittels javascript eine Suchfunktion zu erstellen. Da die Seite recht groß ist und eine Übersicht sein soll für über 70 Bezeichnungen, dachte ich das würde für die Benutzerfreundlichkeit ganz angebracht sein. Im Internet stand nur, dass sich php dafür besser eignet. Problem ist, ich will mir momentan weder php noch mysql aneignen, da ich noch javascript nicht so gut kann. Im Internet hab ich auch irgendwo gelesen, dass die Suche etwas länger dauern könnte - dies ist mir egal, Hauptsache es:
Zurzeit hab ich nur den Script, der die Website nach vorhandenen Wörten durchsucht und Meldungen zeigt, wenn das Wort vorhanden ist und wenn nicht (, welcher übrigens auch Begriffe außerhalb des <div> bereiches durchsucht). Das war momentan das einzige, was ich finden konnte:
<DOCTYPE! html>
<meta charset="UTF-8">
<font face="arial" color="#FFFFFF">
<center>
<head>
<script type=text/javascript>
var searchString = document.getElementById('searchString').value;
var result = document.getElementById('Bezeichnungen').innerHTML.match(searchString);
if (result)
alert("Der Suchbegriff \""+searchString+"\" wurde gefunden.")
else
alert("Der Suchbegriff \""+searchString+"\" wurde nicht gefunden.")
</script>
</head>
<body bgcolor="#A5DF0">
<h2>
<u>
Überschrift
</u>
</h2>
</br> </br> </br> </br>
<form>
<label for="Suche">
</br>
<b>
Suche
</b>
</label>
<input type="text" id="searchString" placeholder="Suchbegriff eingeben" autocpmplete="off" list="codes" minlength="3">
</br> </br>
<a href="javascript:search();">
Suche
</a>
</br> </br>
<button type="reset" style="background-color:#FF0000;">
<font color="#FFFFFF">
Neue Suche
</font>
</button>
</br> </br> </br> </br>
<div id="Bezeichnungen">
<table style="border: 2px solid #088A68;" rules="all" cellpadding="20" bgcolor="#298A08">
<tr align="center">
<th style="color:#FFFFFF;">Abkürzung</th>
<th style="color:#FFFFFF;">Bezeichnung</th>
</tr>
<tr align="center">
<td style="color:#FFFFFF;">A1</td>
<td style="color:#FFFFFF;">B1</td>
</tr>
<tr align="center">
<td style="color:#FFFFFF;">A2</td>
<td style="color:#FFFFFF;">B2</td>
</tr>
<tr align="center">
<td style="color:#FFFFFF;">A3</td>
<td style="color:#FFFFFF;">B3</td>
</tr>
</table>
</div>
<datalist id="codes">
<option value="B1">
<option value="B2">
<option value="B3">
</datalist>
</form>
</body>
</center>
</font>
Dies wurde so abgeschrieben, dass man es einfach in den Editor kopieren kann! Allerdings könnten hier Tippfehler sein!
Ich wäre froh, wenn es Vorschläge bzw. Lösungen gäbe, mit denen ich meinen Wunsch umsetzen kann.
Danke! 😉
Servus! Herzlich wilkommen bei SELFHTML!
Momentan versuche ich mittels javascript eine Suchfunktion zu erstellen. Ich wäre froh, wenn es Vorschläge bzw. Lösungen gäbe, mit denen ich meinen Wunsch umsetzen kann.
Jas, mach ich. Gib mir 2Stunden Zeit. Nur so viel am Anfang:
Du hast Dein JavaScript im head, das wird am Anfang ausgeführt, wenn es das Element mit der id searchString
noch gar nicht gibt, da die HTML-Elemente erst danach erzeugt werden.
var searchString = document.getElementById('searchString').value;
im Wiki: JavaScript/Tutorials/DOM
Dein HTML enthält jede Menge veraltete Elemente: center, font -> weg damit.
CSS-Formatierungen wie bgcolor="#298A08" sollten zentral im Style-Bereich im head festgelegt werden.
Im Wiki: CSS/Tutorials/Einstieg
Ich melde mich in 2h wieder.
Herzliche Grüße
Matthias Scharwies
Hallo Vay,
eine Ähnlichkeitssuche ist nicht trivial. Wenn Du noch gar kein JavaScript kannst, wird das mühsam für Dich werden.
Ein Lade-Popup - wozu? Es ist doch schon alles geladen. JavaScript ist schnell genug, so dass ein "Bitte Warten" Popup während der Suche nicht nötig ist.
Und dann brauchst Du noch eine Idee, wie Du die gefundenen Treffer darstellen willst. Soll die angezeigte Liste auf die Treffer reduziert werden? Soll die Liste vollständig bleiben, aber die Treffer farblich hervorgehoben werden? Von Bedienbarkeit mal ganz zu schweigen...
Rolf
@@Vay
Momentan versuche ich mittels javascript eine Suchfunktion zu erstellen. Da die Seite recht groß ist
Zum Verständnis: Möchstest du auf einer Webseite oder einer Website suchen?
Im ersten Fall: Browser haben bereits eine Suchfunktion: [cmd][F] für die Obstler, [ctrl][F]/[Strg][F] für die Windoofen. Wie’s bei den Pinguinen heißt, weiß der … Pinguin.
Das war momentan das einzige, was ich finden konnte:
Aua! Bei dem Code stimmt kaum eine einzige Zeile.
<DOCTYPE! html>
Ausrufezeichen an der falschen Stelle: <!DOCTYPE html>
<font face="arial" color="#FFFFFF"> <center> <head>
Die Darstellung sollte nicht mit misbilligten HTML-Elementen wie font
, center
, br
und -Attributen wie color
, bgcolor
angegeben werden, sondern per CSS.
Und ob Arial eine gute Schriftart ist?
Außerdem öffnet das bereits dem body
; der <head>
-Tag ist an der Stelle falsch. Der Markup Validation Service dürfte da einiges zu melden haben.
</br> </br> </br> </br>
Slashes an der falschen Stelle. Aber siehe oben.
<label for="Suche"> </br> <b> Suche </b> </label> <input type="text" id="searchString"
Die Angabe im for
-Attribut muss mit der ID des input
-Elements übereinstimmen.
LLAP 🖖
Im ersten Fall: Browser haben bereits eine Suchfunktion: [cmd][F] für die Obstler, [ctrl][F]/[Strg][F] für die Windoofen. Wie’s bei den Pinguinen heißt, weiß der … Pinguin.
Batman-Taste?
Im ersten Fall: Browser haben bereits eine Suchfunktion: [cmd][F] für die Obstler, [ctrl][F]/[Strg][F] für die Windoofen. Wie’s bei den Pinguinen heißt, weiß der … Pinguin.
Batman-Taste?
Array(16).join( 'hero'-1) + "Batman";
Hallo nochmal!
ich wollte nur darauf hinweisen, dass ich CSS noch nicht so gut behersche und JavaScript auch nicht. Meine HTML Kenntnisse stammen vom Jahr 2016, wo mir in meinem HTML-Kurs nur Grundlagen beigebracht wurden, wo ich selbstverständlich keine professionelle Website erstellen kann. Dennoch versuche ich, nach und nach weitertzulernen. Mir verfliegen auch nach dieser Zeit die genauen Positionen bsp. von Ausrufezeichen bei < ! DOCTYPE ! html> (Lücken wegen Fehler beim Fettstellen/Durchstreichen)
Zuerst einmal bitte ich dafür um Verständnis!!!
Klar denkt sich jetzt einer jetzt, warum ich nicht mit HTML weitermache: Nun, ich stoße an die Grenzen von HTML und bekomme für die Funktionen , die ich erstellen will immer mehr Suchergebnisse (Von Google), dass es nur mit JavaScript*, PHP* usw. geht. Die genannten (Mit einem Sternchen*), dabei am Häufigsten.
Zu den Fragen:
Ich hoffe soweit, dass viele Fragen geklärt sind. Danke schonmal für eure Antworten -Vay
@@Vay
Meine HTML Kenntnisse stammen vom Jahr 2016, wo mir in meinem HTML-Kurs nur Grundlagen beigebracht wurden
Wenn dir im Jahr 2016 in dem Kurs noch das beigebracht wurde, was du als HTML gezeigt hast (abgesehen von den falsch gesetzten !
und /
), dann solltest du dein Geld zurück verlangen.
- Ich möchte auf einer-> MEINER Website suchen, nicht mehr (erstmal)
Und inwiefern genügt dir die Suche, die dein Browser schon drin hat, dafür nicht?
LLAP 🖖
Wenn dir im Jahr 2016 in dem Kurs noch das beigebracht wurde, was du als HTML gezeigt hast (abgesehen von den falsch gesetzten
!
und/
), dann solltest du dein Geld zurück verlangen.
In dieser Zeit besuchte ich die 8. Klasse und es saßen noch paar 7.-Klässler und meine Schulkameraden im Kurs, der übrigens kostenlos war. Mir hats halt Spaß gemacht und mir macht es immernoch spaß. Liegt wahrscheinlich an den Typen, der den Kurs ganz locker gehalten hat und nicht auf übertrieben-erwachsen getan hat. Und mal ganz abgesehen davon dass der Kurs; auch nur Freitag nachmittgs, einmal die Woche, insgesamt nur 4 Monate ging, hatte ich dann 2 Jahre kein HTML-Editor, mit den ich Gelerntes Wiederholen konnte. Da verfliegen die Sachen auch mal. In meiner 1. Nachricht stand übrigens auch, dass da Tippfehler sein könnten. Und bei sowas war es vermutlich einer, weil ich diese Nachricht nicht am PC getippt habe, sondern auf dem Handy (und auch versehentlich fast am Ende des abtippens auf dem abbrechen-Button gekommen bin). 😑 Also ENTSCHULDIGUNG wenn paar Zeichen nicht an der richtigen Stelle sind! 😅
Und inwiefern genügt dir die Suche, die dein Browser schon drin hat, dafür nicht?
Wie in meiner ersten Nachricht schon gesagt:Es ist eine Übersicht für mehrere Bezeichnungen. Ich habe vielleicht vergessen zu erwähnen, dass die sowohl Mobil, als auch am PC aufrufbar sein sollte. 😅 Überwiegend auf dem Handy und da kenn ich bis jetzt keinen, der die STRG-Taste/CTRL-Taste dort hat.
Hallo,
Wenn dir im Jahr 2016 in dem Kurs noch das beigebracht wurde, was du als HTML gezeigt hast (abgesehen von den falsch gesetzten
!
und/
), dann solltest du dein Geld zurück verlangen.
das war wohl symbolisch gemeint: Dann war dieser Kurs nicht viel wert, denn er hat einen Wissensstand vermittelt, der schon rund 10 Jahre überholt war.
In dieser Zeit besuchte ich die 8. Klasse und es saßen noch paar 7.-Klässler und meine Schulkameraden im Kurs, der übrigens kostenlos war. Mir hats halt Spaß gemacht und mir macht es immernoch spaß. Liegt wahrscheinlich an den Typen, der den Kurs ganz locker gehalten hat und nicht auf übertrieben-erwachsen getan hat.
Aber offensichtlich war derjenige auch schon nicht mehr up to date.
Und mal ganz abgesehen davon dass der Kurs; auch nur Freitag nachmittgs, einmal die Woche, insgesamt nur 4 Monate ging, hatte ich dann 2 Jahre kein HTML-Editor, mit den ich Gelerntes Wiederholen konnte. Da verfliegen die Sachen auch mal.
Das ist völlig okay. Aber elementare Grundlagen sollten doch hängenbleiben, zum Beispiel dass HTML nur Inhalt und Struktur vermitteln soll, Aussehen und Gestaltung aber Aufgabe von CSS ist.
In meiner 1. Nachricht stand übrigens auch, dass da Tippfehler sein könnten. Und bei sowas war es vermutlich einer, weil ich diese Nachricht nicht am PC getippt habe, sondern auf dem Handy (und auch versehentlich fast am Ende des abtippens auf dem abbrechen-Button gekommen bin). 😑 Also ENTSCHULDIGUNG wenn paar Zeichen nicht an der richtigen Stelle sind! 😅
Akzeptiert, gerne.
Und inwiefern genügt dir die Suche, die dein Browser schon drin hat, dafür nicht?
Wie in meiner ersten Nachricht schon gesagt:Es ist eine Übersicht für mehrere Bezeichnungen.
Ja und?
Ich habe vielleicht vergessen zu erwähnen, dass die sowohl Mobil, als auch am PC aufrufbar sein sollte. 😅
Ja und?
Überwiegend auf dem Handy und da kenn ich bis jetzt keinen, der die STRG-Taste/CTRL-Taste dort hat.
Aber suchen innerhalb der Seite kann dein Handy-Browser doch auch, oder?
So long,
Martin
Hallo Der Martin,
Aber suchen innerhalb der Seite kann dein Handy-Browser doch auch, oder?
Ich kenn keinen, der das nicht kann.
Bis demnächst
Matthias
@@Vay
Wenn dir im Jahr 2016 in dem Kurs noch das beigebracht wurde, was du als HTML gezeigt hast (abgesehen von den falsch gesetzten
!
und/
), dann solltest du dein Geld zurück verlangen.In dieser Zeit besuchte ich die 8. Klasse und es saßen noch paar 7.-Klässler und meine Schulkameraden im Kurs, der übrigens kostenlos war.
Nicht nur kostenlos, sondern auch umsonst‽
Mir hats halt Spaß gemacht und mir macht es immernoch spaß.
Na dann war der Kurs doch nicht ganz umsonst. Er hat was gebracht, wenn auch nicht inhaltlich.
Wenn dir das Spaß macht, vergiss das, was du dort gelernt hast, und fang nochmal richtig™ an. Vielleicht ist Wie fange ich an? ein guter Einstiegspunkt für dich.
Was nicht heißen soll, dass du „den Typen, der den Kurs ganz locker gehalten hat“ vergessen solltest. Sei ihm dankbar, dass er dir zwar nicht best practice, aber den Spaß vermittelt hat.
LLAP 🖖
@@Gunnar Bittersmann
- Ich möchte auf einer-> MEINER Website suchen, nicht mehr (erstmal)
Und inwiefern genügt dir die Suche, die dein Browser schon drin hat, dafür nicht?
Lesefehler meinerseits. Du sagtest „Website, nicht „Webseite“. Ich hatte mich durch das „(m)einer“ blenden lassen.
Um eine ganze Website zu durchsuchen, ist eine Suche, die nur auf der aktuellen Seite sucht, natürlich nicht geeignet. Das betrifft die Suchfunktion des Browsers, aber auch clientseitiges JavaScript. Woher soll ein auf einer Seite im Browser laufendes Script denn wissen, was auf anderen Seiten der Website steht?
Du brauchst eine serverseitige Technik. Wie ich die Sache sehe, übersteigt das deine gegenwärtigen Kenntnisse.
Du kannst eine Suchmaschine auf deiner Website suchen lassen und das Suchergebnis verlinken:
<a href="https://duckduckgo.com/?q=Hommingberger+Gepardenforelle+site%3Aexample.net">Suche auf example.net nach „Hommingberger Gepardenforelle“</a>
LLAP 🖖
Schlagwortsuche: Hierzu müssen die Inhalte aufgearbeitet werden. So daß bei einem Treffer die Seiten im ergebnis erscheinen, in denen die gesuchten Schlagworte vorkommen. MFG
Hallo, Momentan versuche ich mittels javascript eine Suchfunktion zu erstellen. Da die Seite recht groß ist und eine Übersicht sein soll für über 70 Bezeichnungen, dachte ich das würde für die Benutzerfreundlichkeit ganz angebracht sein. Im Internet stand nur, dass sich php dafür besser eignet. Problem ist, ich will mir momentan weder php noch mysql aneignen, da ich noch javascript nicht so gut kann. Im Internet hab ich auch irgendwo gelesen, dass die Suche etwas länger dauern könnte - dies ist mir egal, Hauptsache es:
- Sucht Schlagwörter
- weist hin, wenn es nicht vorhanden ist und macht vorschläge für ähnlich geschriebene Wörter, wenn sie falsch geschrieben wurden
- zeigt ein Lade-Popup
Der soll nur ein Teil der Website durchsuchen nicht die ganze. Dann kann man ja, wie ihr sagt es sein lassen (wenn es die ), aber die Website soll nur die Übersicht mit den Bezeichnungen durchsuchen. Drunter ist noch bischen Text, den ich weggelassen habe, da ich keine Lust hatte, nochmal alles abzutippen. Somit hab ich den Text, der nicht durchsucht werden soll, weggelassen, da dieser für die Frage nicht relevant ist.
Gruß Vay
Servus Vay,
Hallo, Momentan versuche ich mittels javascript eine Suchfunktion zu erstellen. >> Hauptsache es:
- Sucht Schlagwörter
- weist hin, wenn es nicht vorhanden ist und macht vorschläge für ähnlich geschriebene Wörter, wenn sie falsch geschrieben wurden
- zeigt ein Lade-Popup
Der soll nur ein Teil der Website durchsuchen nicht die ganze. Dann kann man ja, wie ihr sagt es sein lassen (wenn es die ), aber die Website soll nur die Übersicht mit den Bezeichnungen durchsuchen.
Umweg: Du hattest im ersten Beispiel ja schon mit einer datalist im Suchfeld gearbeitet. Evtl. bietest Du den Nutzern Deiner Webseite ein Menü zu den vorhandenen Bezeichnungen (Überschriften?, Tabelleneinträgen?) an.
Grundsätzlich: Lass Dich nicht entmutigen, was alles falsch ist oder nicht geht. Gestern hatte ich Dir die Einstiegs-Tutorial ans Herz gelegt:
im Wiki: JavaScript/Tutorials/DOM
Dein HTML enthält jede Menge veraltete Elemente: center, font -> weg damit.
CSS-Formatierungen wie bgcolor="#298A08" sollten zentral im Style-Bereich im head festgelegt werden.
Im Wiki: CSS/Tutorials/Einstieg
Es gibt ein (noch nicht fertiges) JavaScript-Tutorial "Grundlagen von Strings und Arrays", in dem Du lernen kannst, wie
Das letzte Beispiel sucht ein Wort aus einem Text: Blacklist für Beleidigungen. Das muss jetzt noch erweitert werden, aber so kannst du evtl. schon mal einen ersten Überblick bekommen.
Die beste und umfassendste Lösung habe ich auf stackoverflow gefunden:
stackoverflow.com/how-to-highlight-text-using-javascript
Die Antwort mit den 36 Punkten zeigt eine umfassende Lösung mit HTML-Beispiel. Probier's mal aus!
Herzliche Grüße
Matthias Scharwies
Umweg: Du hattest im ersten Beispiel ja schon mit einer datalist im Suchfeld gearbeitet. Evtl. bietest Du den Nutzern Deiner Webseite ein Menü zu den vorhandenen Bezeichnungen (Überschriften?, Tabelleneinträgen?) an.
Meinst du sowas wie Oberthemen die sie dann anklicken und dazu springen. Wie gesagt, ich denke bei meinen wenigen Java-Kenntnissen u.ä. kann ich glaub ich kein Menüband gestalten.
Grundsätzlich: Lass Dich nicht entmutigen, was alles falsch ist oder nicht geht. Gestern hatte ich Dir die Einstiegs-Tutorial ans Herz gelegt:
Danke 😀
im Wiki: JavaScript/Tutorials/DOM
Hier schaute ich schonmal nach Hilfe, aber ich bin nicht so gut darin, mir was selbst beizubringen, nur bei sehr intensiver Auseinandersetzung mit diesem Thema. Deshalb suche ich eher nach Vorlagen. Mir ist klar, dass ich daraus nicht viel lerne, aber so lerne ich vielleicht mir ein Überblick zu verschaffen, wie die Skripte aufgebaut sind und was wo eingesetzt werden kann.
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Grundlagen_von_Strings_und_Arrays
Das war eines der ersten Websites, bei denen ich geguckt habe. Leider nicht ganz, was ich suchte. 😕
Hier hab ich den Skript kopiert und auf die jeweiligen Skripte (HTML, javascript, usw.) angepasst, aber irgendwie funktioniert der nich ganz. 😕
CSS-Formatierungen wie bgcolor="#298A08" sollten zentral im Style-Bereich im head festgelegt werden.
Mache ich zum Schluss als: Letzter Schliff
Im Wiki: CSS/Tutorials/Einstieg
Hier werde ich später mal reinschauen, um Meine Website einbischen besser zu Gestalten. 😉
Gruß Vay
Hallo Vay,
CSS-Formatierungen wie bgcolor="#298A08" sollten zentral im Style-Bereich im head festgelegt werden.
Mache ich zum Schluss als: Letzter Schliff
Ganz schlechte Idee. Was man nicht gleich macht, macht man nie.
Bis demnächst
Matthias
Hallo Vay,
muß es unbedingt eine Javascript-Suchmaschine sein, und dann auch noch eine selbst erstellte?
Nimm die fertige PHP-Suchmaschine (konfigurierbar) von Werner Zenk, oder teste sie zumindest. Selbst habe ich sie aber noch nicht ausprobiert.
Zu Deinen Sonderwünschen:
macht vorschläge fürähnlich geschriebene Wörter, wenn sie falsch geschrieben wurden
Wie soll das funktionieren? Dann müßtest Du die vermuteten "ähnlich geschriebene[n] Wörter" im Quellcode der Seiten hinterlegen, zB in Kommentaren oder in Fantasie-Meta-Elementen.
zeigt ein Lade-Popup
Wenn die Suche 2/10 Sekunden dauert, wäre es blöd, vorher ein "Lade-Popup" anzuzeigen, das zusätzlich eine halbe oder ganze Sekunde benötigt. Nicht alles, was modern ist, ist sinnvoll.
muß es unbedingt eine Javascript-Suchmaschine sein, und dann auch noch eine selbst erstellte?
Muss keine sein, wäre für mich bloß weniger verwirrend, da ich versuche css und javascript anzueignen und dann kommen die ganzen anderen vorschläge hinzu wie php u.ä.
Zu Deinen Sonderwünschen:
macht vorschläge für ähnlich geschriebene Wörter, wenn sie falsch geschrieben wurden Wie soll das funktionieren? Dann müßtest Du die vermuteten "ähnlich geschriebene[n] Wörter" im Quellcode der Seiten hinterlegen, zB in Kommentaren oder in Fantasie-Meta-Elementen.
Halt ungefähr wie Google. Ich denk mal die haben auch nicht alles potenzielle in den skripten verbaut. Da gibt es bestimmt irgendeinen weniger aufwenigen Weg, dass der ähnlich geschriebene Wörter auch sucht.
zeigt ein Lade-Popup Wenn die Suche 2/10 Sekunden dauert, wäre es blöd, vorher ein "Lade-Popup" anzuzeigen, das zusätzlich eine halbe oder ganze Sekunde benötigt. Nicht alles, was modern ist, ist sinnvoll.
Diese Frage wurde schon geklärt, aber nochmal: auf diversen websites wurde empfohlen php zu benutzen , da javascript langsamer sein soll. Ich verstand unter langsam: mehrere Sekunden. Deshalb dass mit dem Lade-Popup.
Danke aber dennoch für den Vorschlag. Ich schau's mir noch an
MfG Vay