Search Your Site with JavaScript, XML and CSS part Two

In the first article we look at all of the associate technology; the XML file, the CSS file and the containing HTML file.  In part two, we are going to focus mainly on the JavaScript, with perhaps a little bit more CSS and a few HTML updates towards the end.  Most of the code in this article will be JavaScript, but there will also be elements of the DOM that we'll use as well.  Getting familiar with DOM scripting is an excellent road to learning the basics of AJAX but it shouldn't be confused with AJAX because it lacks some of the fundamental methods involved such as the use of the xmlHTTP object. 

The JavaScript

The first thing we want the search script to do is to open the XML file to get the list of URLs that should be included in the search.  As those of you that read the article on generating a sitemap will know, this is easily done with a very small cross-browser function.  In a text editor, start with the following:

A set of global variables, which we'll make use of in several of our functions, and an array, the use of which will become apparent towards the end of the JavaScript file.  The first function, to be called on the main search pages onload event, will be as follows (readers of my previous tutorial will find this very familiar!):