Portfolio: Sandwiches and funerals

Added two portfolio items: onzeCatering.nl and the DELA Uitvaartkompas (literally "Funerary Compass", but the name doesn't survive translation). Both are heavily form-oriented sites, and the first one uses a new idea for searching through large amounts of items which I hope to expand in future projects.

When the butcher I've been buying my meat from for ages told me he needed an ordering website for his catering business, I was intrigued. For budgetary reasons a real database-driven site was out of the question, but on the other hand he wanted to offer about 150 kinds of sandwiches, making some sort of usability enhancement beyond a plain form-in-a-table mandatory.

I decided on a W3C DOM search script to help people find their way in the large sandwich table form. Obviously it wouldn't work without JavaScript, but I didn't worry too much because

  1. his clients are overwhelmingly Explorer Windows users
  2. the form remains accessible, it just becomes badly usable (and this reasoning touches on fundamental questions that will have to be addressed in the near future)

You can try the resulting script on the sandwiches page. Search for them at the top of the page; the form is in Dutch, but try "ham" (ham), "kaas" (cheese) or "filet" (fillet) to get an idea of how it works. Please don't submit the form, though, unless you live in Amsterdam and really want to order some sandwiches.

Basically the script is quite simple:

  1. onLoad, store the title of each table row (ie. the sandwich name) in a special property of the TR. This is to speed up the script: it doesn't have to read out values of 150 hard-to-find text nodes each time the user presses a key.
  2. onKeyUp in the search field, go through all these properties. If they partially match values, move the relevant TR straight to the top of the page.
  3. Ordering a sandwich gives the user some extra form fields: he has to decide what sort of bread he wants, and whether he wants butter. Allowing users to order the same sandwich with different kinds of bread was tricky, both technically and interaction-wise, but I was able to solve it well enough for the time being.

My client's clients have overwhelmingly indicated that they understand and like the search, so this site makes everybody happy.

The story behind DELA Uitvaartkompas is totally different, and I'll tell it in a separate later entry.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?



Comments are closed.

1 Posted by Dante Evans on 4 January 2005 | Permalink

Neat. There is a similar technique for searching with the DOM called Live search (http://blog4.bitflux.ch/wiki/LiveSearch).
It basically uses XMLHTTPRequest to query that database onKeyPress.

2 Posted by Svemir Brkic on 4 January 2005 | Permalink

JS error on sandwiches search form - Firefox 1.0 (no need to publish this comment, just letting you know)

Error: this.parentNode.parentNode.parentNode has no properties

Source File: http://www.onzecatering.nl/onzecatering.js
Line: 164