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.
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 = 'email@example.com';
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.
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=new idx('http:\/\/clik.to\/award\/','Website Construction Award','web award','construction','browser compatibility','computer');
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.