javaScriptDummy
New member
Hallo Leute.
Ich habe ein großes Problem und sitze intensiv seit 2 Tagen daran. Ich muss eine Suchfunktion in eine Website integrieren. Die Suche soll dabei eine Liste filtern. Also wenn man einen Begriff eingibt, dass nur noch die passenden Listeneinträge angezeigt werden und die anderen verschwinden. Ich habe es nur bis dahin geschafft, dass mir die Begriffe markiert werden. Dies habe ich mir allerdings auch zurechtgegoogelt. Außerdem werden dort auch die HTML-Tags markiert. Das sollte eigentlich auch nicht passieren.
Ich muss es eigentlich bis morgen fertig haben. Ist für ein Projekt welches ich morgen wegschicken muss. Ich bin echt aufgeschmissen und hoffe dass mir jemand weiterhelfen kann. Anbei findet Ihr mein Problem:
Ich habe ein großes Problem und sitze intensiv seit 2 Tagen daran. Ich muss eine Suchfunktion in eine Website integrieren. Die Suche soll dabei eine Liste filtern. Also wenn man einen Begriff eingibt, dass nur noch die passenden Listeneinträge angezeigt werden und die anderen verschwinden. Ich habe es nur bis dahin geschafft, dass mir die Begriffe markiert werden. Dies habe ich mir allerdings auch zurechtgegoogelt. Außerdem werden dort auch die HTML-Tags markiert. Das sollte eigentlich auch nicht passieren.
Ich muss es eigentlich bis morgen fertig haben. Ist für ein Projekt welches ich morgen wegschicken muss. Ich bin echt aufgeschmissen und hoffe dass mir jemand weiterhelfen kann. Anbei findet Ihr mein Problem:
HTML:
<!DOCTYPE html>
<head>
<title>Übung</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="suchen" action="">
<input type="text" name="suche" id="suchText" />
<input type="submit" value="suchen">
</form>
<nav id="list" name="body">
<ul>
<li><a href="#">Ford Granada</a>
<ul>
<li><a href="granada_1.html">Ford Granada 1</a>
<ul>
<li><p><img src="../../media/Ford_Granada_I.jpg" alt="Ford_Granada_I" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</li>
</ul>
</li>
<li><a href="granada_2.html">Ford Granada 2</a>
<ul>
<li><p><img src="../../media/Ford_Granada_II.jpg" alt="Ford_Granada_II" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</li>
</ul>
</li>
<li><a href="#">Ford Granada 3</a></li>
</ul>
</li>
<li><a href="#">Ford Escort</a>
<ul>
<li><a href="#">Ford Escort 1</a></li>
<li><a href="#">Ford Escort 2</a></li>
</ul>
</li>
<li><a href="capri_1.html">Ford Capri 1</a>
<ul>
<li><p><img src="../../media/Ford_Capri_1600XL.jpg" alt="Ford_Capri_I" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</li>
</ul>
<li><a href="#">Ford Buckeltaunus</a></li>
</ul>
</nav>
<script>
if (window.location.search != "") {
var suche = window.location.search.split("=");
var suchtext = unescape(suche[1]);
var bodyTag = document.getElementsByName("body");
for (var i = 0; i < bodyTag.length; ++i) {
bodyTag[i].innerHTML = bodyTag[i].innerHTML.replace(new RegExp(suchtext, "gi"),
'<span style="background: Yellow;">' +
bodyTag[i].innerHTML.substr(bodyTag[i].innerHTML.search(new RegExp(suchtext, "gi")), suchtext.length) +
'</span>');
}
}
</script>
</body>
</html>
