A couple of weeks ago, a client brought us an interesting problem. They wanted a function to search their rather massive catalog. The only problem? Their company has a content management system (CMS) that does not allow any server side scripts execute. The data was stored in a bunch of Excel spread sheets thus requiring us to batch process it. We wrote a macro to export the file to XML and clean it — long story!

Once that side of the equation is handled, the problem was to come up with a simple solution to do the search.

Lo behold, after a few minutes of Google search, we found a script written a couple of years ago: Simple Javascript/XML based search. It was very simple!

We re-wrote a similar script using jQuery frame work. It uses a RegExp object to handle the match and also added the tablesorter jQuery plugin to improve the usability. Added some validation and such and viola, it became a neat little tool. Thought we’d share….

Demo: dev.blencorp.com/jSearch

Code

First thing first

<link rel="stylesheet" href="path/to/default.css" />
<script type="text/javascript" src="path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="path/to/tablesorter.js"></script>
<script id="data" type="text/javascript" src="path/to/search.js" xmlData="path/to/data.xml"></script>

You’ll notice I’ve added an id and xmlData attributes to the search.js reference. This is the best way to pass the xml file location from the HTML file. This helps a great deal if you have multiple xml files you want to use as data source.

Read the rest of this entry »