How to use I-Search
See bottom of page for update history
This JavaScript-based system puts a lightweight database-like search facility on a Web page. It is quite old and has to some extent been superseded by other technologies.
Before using it, consider whether creating a custom search engine with Google or developing an AJAX / server-side script solution might be better.
I-Search still works though, and it could be a good answer when server-side scripting or other tools are unavailable or unsuitable.
Try it below. It's a searchable list of Internet sites I used to maintain when I wrote the HelpDesk column for PC Plus magazine. PC Plus has a cover-mount disc containing free software and files associated with magazine articles. It has an HTML front end in which HelpDesk has a page.
Since HelpDesk is mainly about solving problems, and problems are often resolved by visiting a manufacturer's Web site, I compiled the list of popular manufacturers and some other sites to save people time. Readers could copy the search page to their hard disk and bookmark it for instant access from within their browser.
Search for a popular manufacturer such as Epson. Also try keywords like 'printer' (without quotes).
I didn't do too much with the keywords, but you get the idea – it's possible to have invisible fields that are included in the search but do not appear in the results table. Note that since I no longer write HelpDesk, the list is way out of date.
Several people asked how to do something similar for their own sites so I reworked the JavaScript into a generic form that easily be reused for different purposes.
The two drawbacks are that if the browser does not support JavaScript or it has been turned off, your visitors will not see the search form (although they will see a warning message and an alternative link) and that all the data is downloaded with the page. Therefore it is unsuitable for large datasets. It should be OK for data that runs to a few tens of kilobytes, which in practice could amount to hundreds or thousands of records.
Download and install the I-Search files from the Downloads section.
1: Create your dataset
How you store the data is up to you. The Internet Sites list is maintained in Excel, but you could use another spreadsheet, a database, word processor, your own custom program or even Notepad. The important thing is that you are able to export the data in a form I-Search can use.
It is a form of comma-delimited text with each field enclosed in quotation marks. This is an internal telephone list with three records and six fields (surname, forename, number, department, job title, optional hidden keywords):
"Avery", "Ron", "1234","Sales", "Exec", "",
"Bennet", "Rachel", "3432","Accounts", "Exec", "first
aider",
"Brown", "Barry", "4564","Sales",
"Exec", ""
Carriage returns at the end of each record are ignored by I-Search but help readability when working on the source code. You may also insert tabs and spaces to aid readability, as long as they don't fall inside the field data.
RIGHT...
"Avery" ,
"Ron" , "1234", "Sales"
, "Exec", ""
,
"Bennet", "Rachel", "3432",
"Accounts", "Exec", "first aider",
WRONG...
"Avery ",
"Ron ", "1234", "Sales
", "Exec", "
",
"Bennet", "Rachel", "3432", "Accounts", "Exec", "first
aider",
Note that each record ends with a comma, except the last one. In fact, take out the redundant carriage returns and the entire dataset is one long line. Also take note of the fact that if a field does not contain data, it must have an empty string placeholder "".
Getting data into this format may be tricky as JavaScript syntax doesn't correspond exactly with standard export options in database and spreadsheet programs. I have provided a utility, Cvt2JS.exe, that will convert one of the standard export formats (tab delimited) into a JavaScript array definition.
Export your data in tab-delimited format (a text file with one record per line and a single tab character between fields). Copy Cvt2JS.exe into the same folder. Open a command line window in that folder (type CD "\path" into the command line window, where "\path" is the folder's path). Suppose your data is in the file Demodata.txt. Type this:
Cvt2JS.exe Demodata.txt Demodata1.txt
This should cause Cvt2JS.exe to process the data and output it to Demodata1.txt.
2: Integrate the data with the JavaScript
Load Searchscript.js into a text editor. Don't be fazed by that raft of incomprehensible JavaScript; there are notes inside the file to tell you exactly what to do.
- Search for [EDIT 1] and insert the page title;
- Search for [EDIT 2] and insert the column headings. The JavaScript determines the number of fields from this, so be sure to put a placeholder "" for the column if it has no title;
-
Search for
[EDIT 3] and insert switches to tell the JavaScript how to treat the
column for display purposes. These are
fully documented in Searchscript.js but two examples are
"" to print it as-is, while "OM" means omit this
column from the results table. The following switches for a three-field
table would print the first two columns in the results but omit the third:
var ColumnSwitches=new Array("", "", "OM");
Further switches relate to how URLs are treated if you want clickable links in the results - Search for [EDIT 4] and insert your data. It will become something like this:
db=new Array ( "Anne", "Jones", "2301", "Mike", "Smith", "3502", "Emergency","","9 999" );
Raw data exported from your database is now prefixed with db=new Array and ends with ); to turn it into JavaScript code; - Resave the file.
In practice edits 1, 2 and 3 need doing once, when you create the system. Only edit 4 is needed to update it.
3: Reference the JavaScript in your HTML
The easy bit!
<noscript>
<p>The searchable version of the list requires JavaScript support. You do not have this so please <a href="your_alternative_page.htm">CLICK HERE</a> to use the non-JavaScript version.</p>
</noscript>
<script type="text/javascript" src="searchscript.js"></script>
Obviously you may need to amend the path to Searchscript.js to match the structure of your site and you need to provide an alternative page or message for users without JavaScript.
The default Searchscript.js file contains a simple phone list. Try entering words and phrases like 'manager', 'accounts', 'fire warden', 'first aider' and 'spare keys'. If you delete this and rename Searchscript1.js to Searchscript.js, the search engine magically morphs into a version of the Internet site list illustrating one of the URL handling features.
It's much easier than it sounds. So easy in fact, that the PC Plus Web site editor used to employ the system even though he works on an ASP-enabled site. It was a lot less fuss than persuading the server lords to write him some back-end database code and convert my data to the required format every month.
Update history
15th Feb 2005: Example code updated to XHTML.29th June 2002: Minor code change to cure a bug that crashes Netscape 4.7. To update an existing installation, open searchscript.js and find the function declaration for ShowTableRow(i). Change
var i, j; to var j; and save the file.
April 2002: Initial release on this site. Had previously appeared on the cover disk of PC Plus magazine.
