Site Search

When I first started creating this site I knew that I would eventually end up with lots of pages. In order for you to be able to easily find the page you are looking for I needed to add a search facility. You may not have as many pages as I now have on this site but your visitors would probably appreciate the ability to search your site as well.

I didn't have access to any server side scripting languages when I started creating this site and so I created the site search facility in Javascript. The visitor to the site entered their search term which was then looked up in an array to determine which pages most closely matched the request. A results page was then dynamically created using Javascript. I am now making this Javascript Search available for you to use. You are welcome to use this script on any non-commercial web site that you may have. All that I ask is that you don't remove any copyright notices and obey the other comments within the code. If you have a commercial website you may still use the script (subject to the same conditions) in return for a donation toward the cost of my maintaining this site.

This script has been thoroughly tested with Internet Explorer 4, 5, 5.5, and 6, with Netscape 4.7, 6.2, and 7, and with Opera 4, 5, 6, and 7. The script contains some code specific to several of these browsers. The only one of these browsers where the code doesn't work is Opera 4 where the browser doesn't allow dynamically creating a new web page in the same browser window using Javascript. The script therefore attempts to identify Opera 4 (even when it is masquerading as a different browser) and will suggest upgrading to a more recent version.

The first thing that you need to do is to download and unpack the files. There are four of them, one html page, two Javascripts and an image. The image (built.gif) is a "Built by Felgall" logo that must be displayed at the bottom of the search page so that others will know where they can get the search script from if they want a copy.

The next thing that you need to do is to customize the html file (find.htm) to match the appearance of the other pages on your site. You ought to be able to do this by adding code where I have placed the header and footer comments within the page source.

The findb.js file doesn't need to be touched but you do need to make changes at the top of the findh.js file to customize the appearance of the results page and set up the search table. First to customize the results page, the code at the top of the file looks like this:

var header = '<body bgcolor="ffffff">';
var footer = '<\/body>';
var bgcolor = '#f0f0f0';
var email = '';

You need to assign the same code that you placed in the header and footer locations in the html file to the variables of the same name at the top of this file. Since this is Javascript and not pure HTML you will need to "escape" any slashes and single quotes within the code by placing a backslash directly in front of all such characters.

You also need to assign a colour value to the bgcolor field. This colour will be used as the background colour for the results table and so should be one that fits with the other colours on your site.

You also need to supply your email address so that when someone searches your site and doesn't find what they are looking for that they can (optionally) let you know what they searched for. This way if they searched for something that is on your site but you had forgotten to add the particular search term then you can add it in now, better late than never.

Now that we are on to the subject of search terms, the one remaining task is to set up the table of search terms that the Javascript will actually search to determine what pages to list as results. I have included three entries so that you can see how the search works (note that this will open in a new browser window). Try entering the word computer or just enter er and see how matching results are found and displayed.

Let's now take a closer look at the example table so that you will be able to see what you need to enter in order to set up the entries that you require for your search:

var xItm = new iArray(3);
xItm[1]=new idx('http:\/\/\/','Ask Felgall','computer help','javascripts','html','operating systems','os2','linux','windows','browsers','networking','desktop publishing','word processing','graphics','computer');
xItm[2]=new idx('http:\/\/\/award\/','Website Construction Award','web award','construction','browser compatibility','computer');
xItm[3]=new idx('find.htm','Javascript Search Facility','Javascript','site search');

The first line identifies the number of entries in the table. You will need to change this whenever you add items to the search table. Each entry commencing with xItem is an item in the search table and contains three or more comma separated fields each contained within single quotes. If a field needs to contain a single quote or slash you "escape" it by preceding it with a backslash (as you can see with the URLs in the first two entries).

The search will compare the search term that your visitor enters with each title and keyword in the table. If either the entered term is contained within the entry in the table or the table entry is included in the entered search term then that entry will appear in the search results. In addition the order in which the results are displayed will depend on how closely the terms match. The closer the match, the higher on the results page that the entry will appear. The title or keyword which matched the entered term will be displayed above the entry on the results page with the matching part of the entry shown in bold. In addition, where there are multiple matches between the entered search term and the keywords for a particular page there will be multiple entries for the page displayed in the results. In this instance the subsequent entries for the same results page will be indented.

That is all that there is too it. All you need to do then is to upload the four files to your site and remember to add an entry to the table in the findh.js file whenever you want to add another page to the search. I am not completely sure how many entries you can have in the table but I had well over 500 pages listed with quite extensive lists of keywords on many of them prior to switching to a different search facility (which I wrote using PHP).

I hope that you find this search facility as useful an addition to your web site as I did with mine. Oh, and you don't need to keep any of the three existing entries in the search table, you can replace them with your own entries.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow