Structured Data Search

An easy-to-implement script for searching structured data elements such as lists and tables.

Knowing how to structure data correctly is one of the most fundimental skills a good web designer must learn. Mastering any computer language, be it XHTML, Javascript or PHP is all about knowing which tools to use for a given job, in order to achieve a result correctly.

Thankfully it seems the days when designers used <p> tags to format everything have all but gone. Remember all those dubious mid-90s lists that used paragraph-embedded <br>s? Sure you do, and you were probably just as guilty for implementing them as I. Thankfully though it now seems that semantically correct data structure is here to stay. We're already half way towards usability bliss - but not yet there entirely.

Lists and tables are a great advancement over the mono-tone markup of yesteryear. However they still become difficult to navigate when very large quantities of data are held within them. Any data format can become a real pain when it becomes too big; the scroll wheel on your mouse somehow just doesnt seem effective enough anymore.

Seek and ye shall find

We could do with a method that would allow visitors to easily filter out the data they do not need. The dodgy pun in this title is actually quite accurate; users should be able to seek out the data they require. We are not taking away their ability to manually read through our page's lists and tables - we are simply offering an alternative; a miniature search engine, if you will.

You're going to offer me a solution now, aren't you?

Yes, as a matter of fact I am. The solution is called Structured Data Search (SDS). It consists of two functions, written in Javascript that will plug extremely easily into almost any website.

I'm curious... how does it work?

Glad you asked! SDS should be stored within an external .js file, and linked to from within your document's <head> tag using <script src="..">. The lead function, prepare_structuredDataSearch() should be executed on page load. SDS reads your entire document and searches for any elements with a class of data_search, providing this element is either:

At run time SDS automatically creates the necessary markup for a standards-compliant search box and form, and inserts them directly before the element on whose data it will be searching. Basically you do not have to worry about anything else other than entering the aforementioned class name to your list or table - SDS will do the rest.

<ol title="Fruit" class="data_search">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>

I've built SDS in a manner that will allow you to embed as many searches on a page as you require. Should you have say a table, an ordered list and a definition list all on one page then that's not a problem; SDS will create three separate search boxes and distribute them evenly before each data element.

Anything else?

You can specify certain data items, such as table rows or list items, to be omitted from the search, by giving them a class of 'omit_search'. These items will show up regardless of whether data within them match the search criteria or not. An ideal use for this would to omit table headers, which of course should show up regardless to identify columns. A good demonstration is the no frills example, described in more detail further down the page.

The only other thing you might want to do is style your dynamically created search box with CSS to fit visually within the rest your website. The basic markup, of which you can use as a foundation, is as follows:

<form class="structured_data_search">
<input class="textbox" id="varies" />
</form>

The id attribute on the input box varies depending on the number of search boxes you have on your page. The pattern is 'field_searchTerm_#', where # is an integer which increments by one for every search field that is created in order of where the data elements appear chronologically in your markup.

Degradability, standards and support

This function degrades perfectly well. Should Javascript be deactivated then the user simply looses the search facility. The data within the list/table itself is left untouched and the visitor can read the data unhindered. In fact the only residence that the search facility ever existed will be the class attribute on the data element within your markup.

When I first wrote SDS it used innerHTML. However I've since written the powerful innerXHTML functions to help keep all my scripts firmly standards-compliant, and SDS has migrated accordingly. Take a look at the script and you'll find that I've put innerXHTML at the bottom of the page. Should you not want to use innerXHTML then simply delete it - SDS will identify that the functions are not present and revert to the regular, non-standard Microsoft equivalent innerHTML instead.

SDS is very cross-browser friendly. I works in IE6 & 7, Firefox, Flock, Opera, Safari and Camino. If you test any other browsers such as Konqueror then please let me know, though I image the latter would support the script fine.

Example?

In typical Blue Peter fashion there are currently three working examples of SDS to play with, all running on this website. Click here and here to see the active demonstrations. For a much cleaner, no frills example click here. I'd recommend you look at the source code, particularly on the latter as it will give you a clear idea how easy the system is.

Closing...

I hope you can put this script to good use, even if only for just one project. If you don't like the result you can remove the function as quick and easily as you put it in. Thanks also to Rik Lomas for inspiring me with the work on his jQuery plugin. I've released this software under the Creative Commons Attribution-Share Alike 3.0 License.

If you have any feedback then feel free to get social and drop a comment below :)

Download IconDownload Structured Data Search (v0.3)

Dated: 07/11/2006. Filed under: Projects and Web Design.


Comments

On 8th November 2006 Danny said:
Gravatar image
This looks really useful... thaanks for sharing!!
On 8th November 2006 Rik said:
Gravatar image
Hi Steve,

It would have been nice for a small credit or an 'inspired by' link to my jQuery plug-in quickSearch, which you even commented on. Nature of the web, I guess...
On 8th November 2006 Steve Tucker said:
Gravatar image
Sorry Rik - how rude of me...
On 8th November 2006 Bramus! said:
Gravatar image
Demo looks nifty. Didn't check the code yet but I'm sure it'll be well written ;)

Kudos!
On 8th November 2006 Andrew said:
Gravatar image
Man, i love your site design, it's really stunning and effectivly uses spacing and typography. One suggestion though...since your menu is done in a manner that most people have not encountered (or don't encounter often) perhaps you might make the "Menu" button text a little darker, maybe even red?

Logically, it is in the right spot, and I found it easily...but we live in a world with more idiots than cool web designers. Just a thought. But yeah, great design.
On 8th November 2006 Steve Tucker said:
Gravatar image
@Bramus: cheers for the trust there mate!

@Andrew: Thanks for the compliments on the design. I did use a darker menu button for an earlier version (version4.stevetucker.co.uk) but kinda felt it wasnt as aesthetically pleasing. I'm planning a couple of experiements with new menu buttons soon - hopefully that may improve usability for the idiots out there ;)
On 9th November 2006 P.J. Onori said:
Gravatar image
Look at you dude, you're rockin' these Javascript projects. This looks absolutely great - keep up the awesome work.
On 10th November 2006 Steve Tucker said:
Gravatar image
Cheers mate :D
On 29th October 2009 Discount Mole said:
Gravatar image
Just what i've been looking for tho sum pobs in i6 not to worry

Journal Archive

Search the archives of this website for design and web-related articles.

Search Archive:

Miscellaneous

Other fluff that doesn't fit within any other category.

XHTML | CSS | 508