Searching Body Text with textRange, part 1: The Basic Script - Coding the Script File
(Page 4 of 5 )
So now that you have the Web page in place, you need the script file and an additional window to act as a dialog box. Let's code the script file, beginning with the JavaScript flavor first. Think first about what we want the script to do; we want to be able to click a button (the search button), and have a dialog box open into which we can enter a search term. The dialog window will then pass the search value back to the script file, and the script will look at the body text of the initial Web page and highlight the first word that matches the search term. The following function will do all of the above (except for the value-passing, which will be handled from within the search window):
function textSearch() {
range = document.body.createTextRange();
searchWord=window.showModalDialog
("Searchwindow.htm",null,"dialogWidth:300px;
dialogHeight:200px;")
match = range.findText(searchWord,null,2);
if (match != false) {
range.select();
} else {
window.alert ("Couldn't find '" + searchWord + "'");
}
}
The first thing this function does is set a variable called range equal to the body text of the document. It does this using the create method of the TextRange() object. Next it sets a variable called searchWord and calls the dialog window. You use the showModalDialog method because you want the dialog window to grab the focus and keep hold of it until one of the buttons on the dialog window is clicked. The parameters passed are the location/name of the dialog window, the null keyword, and some stylistic elements. The middle value can be used to pass values to the dialog window, but as we want to get a value from the dialog, we specify null here.
A second variable called match is now set to either true or false depending on the results of the findText method, which is applied to the range variable (which contains the body text of the document). The parameters passed to the findText method are the search word (stored in the searchWord variable), the null keyword, and an optional flag which controls the search. Using null as the middle parameter will make the search travel forward, which will be the most common method; a negative value can be entered to make the search travel backward. The 2 flag means that whole words only will be matched. Partial words can be matched using 0.
Finally, the if statement highlights the search word if it is found (if match does not equal false), or pops up a message if the search word does not exist in the text (if match does equal false). Save this file as behaviour.js in the same location as the Web page above. You can now edit the Web page to link to the script file. Add the following code to the head of the document:
<script language="JavaScript" src="behaviour.js">
</script>
Also add a function call to the search buttons onClick method:
<button id=buttonSearch title="Click to search for a department" onclick="textSearch()">
All that is required now is the dialog box itself. The following code will give us the window that we want:
<html>
<head>
<script language="JavaScript">
function doOK() {
if (textSearch.value==""){
alert("Enter a word or click cancel");
return
}
window.returnValue=textSearch.value;
window.close();
}
function doCancel(){
window.returnValue="";
window.close();
}
</script>
<title>Search Window</title>
</head>
<body style="background-color:silver;">
<br>
<p style="text-align:center">Enter a search word:</p>
<center>
<input id=textSearch type=text style="width:90%">
</center>
<button style="position:absolute;top:70%;left:25%;width:60"
onclick="doOK()" accesskey="a">OK</button>
<button style="position:absolute;top:70%;left:50%;width:60"
onclick="doCancel()" accesskey="b">Cancel</button>
</body>
</html>
You'll notice that this page contains all of the script and style references within the document, which goes against what we have discussed so far about separating your project into layers that correspond to behavior, style, and so forth. As this window is not designed to be viewed as a proper window, but should act simply as a dialog box that will only appear momentarily when called, I feel that it is acceptable for it to act as a self-contained unit and can therefore be the exception rather than the rule.
Next: How it Works >>
More Code Examples Articles
More By Dan Wellman
