This little search example works but only the first time.
How do I clear all the classes from the p elements so when searching the second time, the highlight from the previous search doesn't show?
<!DOCTYPE html>
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
google.setOnLoadCallback(function() {
$('#searchButton').click(function() {
//remove all added classes so we can search again
//jQuery.each($('p'), function() {
//$('#' + this).addClass('');
//}
$('p:contains("' + $('#searchText').val() + '")').addClass('highlight');
});
});
</script>
<style>
p.highlight {
background-color: orange;
}
</style>
</head>
<body>
<input id="searchText" value="second" />
<button id="searchButton">Search</button>
<p>This is the first entry.</p>
<p>This is the second entry.</p>
<p>This is the third entry.</p>
<p>This is the fourth entry.</p>
</body>
</html>