nicht angemeldet
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
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! 😉
Matthias Scharwies
Rolf B
Gunnar Bittersmann
kai345
Der Martin
Matthias Apsel