Client-Side Search Engine

Jamie Jaworski is the author of five books on JavaScript, Java, and HTML, including Mastering JavaScript and JScript and Java 2 Unleashed.

Download Original Search.zip

In order to simplify searches and to illustrate a useful aspect of JavaScript, I have put together a client-side search engine that allows us to search through old SuperScripter columns.
I'll show you how to tailor this script to your own search needs. I also put together a Cool Tool that will help you to create a local search database.

The following form can be used to search through previous SuperScripter columns.
It uses a client-side script to perform the entire search; no server-side assistance is needed. The script contains a database of SuperScripter URLs, along with their descriptions and keywords. Type in one or more keywords (or select them from the list) and click Search to find the columns that are associated with those keywords. You can use the radio buttons to configure the search to return URLs that match either one or all of the supplied keywords. Play around with the search form to get an idea of how it behaves before going on to learn how it works.

When putting together a local search capability, there are a number of issues that you should consider:

• You may not have a server-side search engine that you can use to perform the searches. For example, your Web site may be a few pages that you've located on someone else's server.
• You may have a server-side search capability that you can use, but you may not want to use it. For example, you may not want to go through the trouble of setting it up and configuring it. You may think that it is overkill for just a few Web pages and that it won't give you the results you need anyway.

How the Search Form Works

The SuperScripter search form is a complete client-side solution for performing local searches. It works with versions 4.0 and later of Internet Explorer and Netscape Navigator. If you used your browser's View Source option to check out the search form's code, you were probably overwhelmed by the size of the script. Don't worry: most of the code is the search database, which consists of the following four arrays:

• keywords is a list of keywords recognized by the search engine.
• urls is a list of URLs that are contained in the local search site.
• urlDesc is a list of one-line descriptions of each of the URLs in the urls array. Each element, urlDesc[i], is the description associated with urls[i].
• searchdb is an array of arrays that maps keywords to URLs. Each element, searchdb[i], is an array that identifies the URLs that are associated with keywords[i]. This array is a list of indices into the urls array. For example, if the value of searchdb[4][3] is 10, then keywords[4] maps to urls[10].

• setupSearchEngine() is called once to make sure that the length of the urlDesc array is at least as long as the urls array; i.e., every URL has a description. It also makes sure that the length of searchdb is at least as long as keywords. This ensures that every keyword has a searchdb entry, although some entries may be just an empty array.
• search(orSearch, keys) is the search engine. It searches searchdb for a list of entries that correspond to the keywords contained in the keys array argument. If the orSearch argument is set to true, then the search will return a URL that matches any keyword. If orSearch is false, then the search will return only those URLs that match all keywords in the keys array.
• getKeyIndex(key) returns the index of key in the keywords array.
• isMatch(index, indexArray) returns true if an element of indexArray has the value index. Returns false, otherwise.
• makeAnchorList(hits,target) takes a two-dimensional array (hits) of URLs ( hits[i][0]) and their descriptions (hits[i][1]) and produces an HTML ordered list of anchor tags that are used to display the search results. The target argument can be used to specify the TARGET attribute of the anchor tags.
• displayResults(htmlTags) displays a Web page in the searchResults window that has the value of htmlTags as the content of its body.
• performSearch() handles the clicking of the Search button by retrieving the keywords selected by the user and invoking the search() function to perform the search. The results of the search() function are processed by the makeAnchorList() function and then displayed via the displayResults() function.
• getSearchKeywords() is invoked by performSearch() to retrieve the keywords that were entered or selected by the user.

<SCRIPT LANGUAGE="JavaScript">
setupSearchEngine()
for(var i=0; i<keywords.length; ++i) {
document.writeln("<OPTION>"+keywords[i]+"</OPTION>")
}
</SCRIPT>

While all this may seem like a lot of code to read through, hang in there! The good news is that you can use the code as is with only minor modifications. All you need to do is to change the keywords, urls, urlDesc, and searchdb arrays to tailor the search form to work with your Web site.

Tailoring the Search Form

Tailoring the search form involves generating the values of the keywords, urls, urlDesc, and searchdb arrays and plugging that data into this template

You can then add any HTML that you want to dress up the template to work with your Web site. The template has the following section of code. Just replace the four array definitions with the data that pertains to your Web site.

The keywords array will consist of the keywords that your searches will support.
The urls and urlDesc arrays will contain your site's URLs and their descriptions.
The searchdb array will be an array of arrays that maps each keyword to an array of URLs.

// *** Replace the following four lines with the output of the Cool Tool ***
var keywords = new Array()
var urls = new Array()
var urlDesc = new Array()
var searchdb = new Array()

For large Web sites, you'll want to generate the above arrays by parsing the documents associated with a set of URLs, generating a database from that information, and constructing a few scripts that will put the database information in the required form.
For small local searches, such as the SuperScripter search form, you can build the arrays by hand using the local search Cool Tool.
The Cool Tool allows you to enter the URLs, their descriptions, and their keywords into a form for automatically generating the array definitions.

Use the Add/Update button to add a URL description to the URL database. Click on a URL in the database and then click the Delete button to remove the URL from the database. You can also update a URL's description and click Add/Update to update the database information. When you are finished, click Generate Code to generate the array definitions to plug into the template