PDA

Click to See Complete Forum and Search --> : indexOf() query script...

xataku_nakusute
09-12-2003, 01:00 AM
how can i use the indexOf() function to make a query/search form field that when submitted, will highlight all of the matching words within a specified div??
and if you give me something with regexp's, pleaz explain it to me, cuz i dont get em that well

thanx
pyro
09-12-2003, 07:52 AM
Here's a simple example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple search demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function searchDiv(frm) {
obj = document.getElementById("searchbox");
re = new RegExp("("+frm.searchval.value+")", "gi");
str = obj.innerHTML.replace(re,'<span style="color:red;">$1</span>');
document.getElementById("searchbox").innerHTML = str;
}
</script>
</head>
<body>
<div id="searchbox">This is some sample text. This is more sample text.</div>
<form action="" onsubmit="searchDiv(this); return false;">
<p><input type="text" name="searchval">
<input type="submit" value="Search"></p>
</form>
</body>
</html>

For the regexp part... I set up the regexp to search through the div, finding all matches (the g) and to be case insensative (the i) and to remember the match (the parenthesis around it). Then just did a simple replace, adding a <span> around the words that were matched.
xataku_nakusute
09-12-2003, 09:42 PM
ok, this is the script after i played round with it:

function queryPage() {
obj = document.getElementById("cont");
re = new RegExp("("+keyword.value+")", "gi");
str = obj.innerHTML.replace(re,'<span style="background-color:#007788; color:#ff8800;">$1</span>');
document.getElementById("cont").innerHTML = str;
}


and it works fine changing the bgcolor of the keyword searched with. however, i need the results to reset when the script is re-initialized, so when i search for 'blah', it highlights all of the words matching 'blah', and when i search again for 'bleh', it clears the previous results and replaces them with the results for 'bleh'....

any suggestions?
pyro
09-13-2003, 09:40 AM
Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple search demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.search {
color:#ff8800;
background-color:#007788;
}
</style>

<script type="text/javascript">
function searchDiv(frm) {
obj = document.getElementById("searchbox");
//initialize
re = new RegExp('<span class=search>(.*?)</span>', "gi");
str = obj.innerHTML.replace(re,"$1");
document.getElementById("searchbox").innerHTML = str;
//find words
re = new RegExp("\\b("+frm.searchval.value+")\\b", "gi");
str = obj.innerHTML.replace(re,'<span class="search">$1</span>');
document.getElementById("searchbox").innerHTML = str;
}
</script>
</head>
<body>
<div id="searchbox">This is some sample text. This is more sample text.</div>
<form action="" onsubmit="searchDiv(this); return false;">
<p><input type="text" name="searchval">
<input type="submit" value="Search"></p>
</form>
</body>
</html>
xataku_nakusute
09-13-2003, 12:06 PM
thanx again!!
works beautifully!
pyro
09-13-2003, 10:30 PM
You bet. Glad it's what you needed... :)