How to Add a JavaScript Site Search to your Website

For XLEcom versions 5.x. (already integrated into version 6.x and up)

How to Add a JavaScript Site Search to your Website

This client side Site Search creates a search page that enables your site visitors to perform site wide Product searches. Depending on what search options the site visitor selects, the returned search results can include a list of pages, products, selling prices, item descriptions, and product images with the most relevant items appearing at the top of the list.

Demonstration

View an XLEcom Demonstration website utilizing the JavaScript site search here:

Go to the Search page and try a search using electronic related words such as LCD, camera, or displays.

Includes Three Search Modes

The are three (3) search modes:

  • Pages - Returns a list of pages.
  • Products - Returns a list of pages, products, and selling prices.
  • Products & Descriptions - Returns a list of pages, products, selling prices, item descriptions, and product images.

Example Search Results

Pages - Returns a list of pages. (partial results shown below)


Products - Returns a list of pages, products, and selling prices. (partial results shown below)


Products & Descriptions - Returns a list of pages, products, selling prices, item descriptions, and product images. (partial results shown below)

Brief Instructions

  1. Create a product database file (prod_search.js) using the download utility below.
  2. Add the Search's HTML Site Search form code and JavaScript HTML reference formulas to your XLEcom program.
  3. Publish your website and copy both the search.js and prod_search.js files to your publish html folder.
  4. That's it.

Download the Code

Files included in the download zip file:

    search.html
    This is a sample of the Site Search. You can use it to test the Site Search on your local computer.

    search.js
    This JavaScript file contains the Site Search engine code.

    prod_search.js
    This JavaScript file contains the Product Database data for all of your products.

    Search for xlecom5.x.xls
    An Excel utility that creates the prod_search.js file.

    search form code.txt
    A text file that includes both the Site Search form code and JavaScript HTML reference formulas as explained below.

    XLEcom-site-search.xls
    This is a modified version of the XLEcom program file already containing both the Site Search form code and JavaScript HTML reference formulas.

    Note: This is just the Excel program file alone, version 5.3, without all the support asset files. If you previously performed a full installation of the program which includes all the support asset files, then you only need this single file.

XLEcom's Site Search Utility
This client side Site Search creates a search page that enables your site visitors to perform site wide Product searches. Depending on what search options the site visitor selects, the returned search results can include a list of pages, products, selling prices, item descriptions, and product images with the most relevant items appearing at the top of the list.

How the Search Function Works
The Product searches are performed on the client's local computer via JavaScript. The search mechanism does not fetch data from a web based database like an ordinary search engine, but instead, fetches the results from a product database JavaScript file downloaded onto the client's computer within their Temporary Internet cache folder. All possible search results are extracted from this single product database JavaScript file. The product database file contains data from the Main & Sub Categories, Sell Prices, Item Names, Item Descriptions, and Product images. Therefore, only the Product data is searchable and not the data contained on any of the Support pages.

Includes Three Search Modes
Pages - Returns a list of pages.
Products - Returns a list of pages, products, and selling prices.
Products & Descriptions - Returns a list of pages, products, selling prices, item descriptions, and product images.

Utilize Product Images in Search Results
The Product Images will only be displayed if the site visitor utilizes the third search mode option: Products & Descriptions.

Advantages and Disadvantages
The advantage of this JavaScript method is that it allows the web designer to integrate a site search without having to use either and external search engine service or maintain a separate SQL type database.

The disadvantage of this method is that the product database JavaScript file containing all the product data can grow to a large size if you happen to have 1000's of products, and each of the products contains a significantly long Item Description. This product database JavaScript file is download to the client's computer when the Search page is loaded, so the size of the JavaScript file can affect the time it takes to download the script. To get an idea of size of product database JavaScript file, use the following to estimated your file size:

The Demonstration site included with this program contains 108 products with full item descriptions. The product data JavaScript file is 87 KB. Therefore, the average is 806 bytes / product ad, or 124 products / 100 KB file.

Utilize Product Images in Search Results
All web browsers will display the product images within the search results if you view your site off your local computer. However, some versions of Internet Explorer may not display all the images if the images have not been previously cached off a web server. Firefox will display the product images within the search results even if they have not been cached off a web server. It you choose to utilize product images within the search results and the browser for some reason cannot display them, then there will be about a 1 inch vertical white space gap between the item title and item description in the search results.

Instructions

To add the XLEcom search feature to your XLEcom website you will need to do the following:

  • Use the Search for xlecom5.x Excel utility to create your Product Database JavaScript file (prod_search.js).
  • Add the JavaScript HTML reference formulas to your Additional Code section.
  • Add the Search form code to one of your top navigation menu pages.
  • Publish your website and copy both the search.js and prod_search.js files to your publish html folder.

Step 1 - Create your Product Database JavaScript file

Use the Search for xlecom5.x Excel utility to create your Product Database JavaScript file (prod_search.js). The utility sheet contains the same instructions below within cell comments to guide your through the process.

You will need to transfer the following XLEcom Database field data to the utility file.

  • Main Category
  • Sub Category
  • Selling Price (Our Price)
  • Item Name
  • Item Description
  • Product Image

Note: The Product Image is an optional field. If you do not want to display images, then neglect this field.

Copy all of the data within these database fields from the XLEcom Database sheet to the utility file. Paste the data into the columns using the Paste Special >> values command. Make sure there are no line breaks (carriage returns) in each of the cells.

The last column within the utility contains the JavaScript code used to create the Product Data search file prod_search.js.

Perform the following steps after your have transferred all your product data from XLEcom to this spreadsheet.

    Step 1: Sort the Table using the Sort List button provided.

    Step 2: Copy the formula cell I9 vertically downwards to cover all the items in the Table.

    Note: The formula in cell I8 is different than the formulas in cells I9 and downwards. The formulas in cells I9 and downwards are the same.

    Step 3: Select all code cells within this Script Code column starting at cell I7 downwards to the end of the list and copy to memory. For the example data, the selection would include all cells within the range I7 through I115.

    Step 4: Paste the data into a new plain text ASCII file. Save the ASCII file as prod_search.js.

Avoiding Technical Problems
In order for the Site search to function, both your Item Names and Item Descriptions must not contain any line breaks. If you take a look at the demonstration program, you will see that the item descriptions do not contain any line breaks.

Below is a sample item description
<b>Description:</b><br>Introducing the next generation of UltraPro™ Series Flat Panel LCDs from ABCO. ABCO 15" 15TTFB Black Flat Panel LCD Monitor.<br><br>The ABCO UltraPro™ offers bright crisp color resolutions and distortion free images with a fast refresh rate.<br><br>Compliant Standards - UL, CSA, DHHS, FCC-B, MPR-II, NUTEK, ISO 9241, EPA Energy Star<br><br><b>Specifications:</b><br>• Model #15TTFB<br>• Native Resolution: 1024 x 768<br>• 0.24mm Pixel Pitch horizontal<br>• 0.14mm Pixel Pitch vertical<br>• 3-Year Manufacturer Warranty

The XLEcom program comes with a utility to help you create your item descriptions. On the Product Design sheet, press the yellow protractor button next to the Item Descriptions entry box.

Step 2 - Add the JavaScript HTML reference formulas to your Additional Code section

The first thing you need to do is add the following formula code to your XLEcom program's Add_Code sheet. You can access the Add_Code sheet by activating the Additional Code Feature. You want to add the code to the Support Pages section labeled "Before the </head> end tag". The screen shot below shows the added code.

You must add the following two lines of code as formulas:

    =IF(Calcs!$D$190=1,"<script type=""text/javascript"" src="""&Calcs!$E$128&"prod_search.js""></script>","<script type=""text/javascript"" src=""prod_search.js""></script>")

    =IF(Calcs!$D$190=1,"<script type=""text/javascript"" src="""&Calcs!$E$128&"search.js""></script>","<script type=""text/javascript"" src=""search.js""></script>")

The included search form code.txt file contains the above two formulas. Make sure there are no line breaks (carriage returns) in the formulas. Copy each of the two formula lines separately into the spreadsheet by first selecting the cell, then selecting the formula bar across the top of the Excel application, and finally pasting in the formula into formula bar.

Step 3 - Add the Search form code to one of your top navigation menu pages

Add the following Search form code to one of your top navigation menu pages:

    </font></p><form action="javascript:void(0)" name="searchform" id="searchform" onClick="SelectInputBox();" onSubmit="Search(this);"><input type="text" size="65" name="searchterm" value="">&nbsp;<input type="submit" value="Search">&nbsp;<input type="button" value="Clear" onClick="ClearSearch();"><br><input type="radio" name="descriptions" value="1" onClick="SelectInputBox();"><font face="Trebuchet MS,Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif" color="#000000" size="-1"> Pages </font><input type="radio" name="descriptions" value="2" checked onClick="SelectInputBox();"><font face="Trebuchet MS,Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif" color="#000000" size="-1"> Products </font><input type="radio" name="descriptions" value="3" onClick="SelectInputBox();"><font face="Trebuchet MS,Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif" color="#000000" size="-1"> Products & Descriptions</font></form><span id="header"></span><br><span id="results"></span><br><span id="footer"></span><p><font>

Make sure there are no line breaks (carriage returns) in the code. The included search form code.txt file contains the search form code. To save the page after the addition of the Site Search form, press the "Save Page" button.

Suggestions
You may want to turn off the page photo on the search page so that the returned search results do not wrap around the photo. The search page should also be named "Search".

The screen shot below shows the added Search form code:

The published search.html page file should look as follows.


Step 4 - Publish your website and copy both the search.js and prod_search.js files to your publish html folder.

    Publish your website and copy both the search.js and prod_search.js files to your publish html folder.

    That's it, your done.

Search Results

The screen shot below shows how the Search results will appear on your site. The returned search results is a list with the most relevant items appearing at the top.