18 February 2008

JSquared auto filter list

One of the updated objects released with JSquared 1.0 beta 2 is the auto filter object. This is a powerful object for filtering lists and is proving useful in a variety of circumstances, not least the creation of auto complete drop down lists for instance for searching.

At present the object only handles static lists, but by the time JSquared 1.0 is in final release, it will support live lists and a host of further options. That is to say that you would be able to provide a JSquared ADIJ or JSquared AJAX object as the list of values and the auto filter object will use that object to retrieve the list of values each time it needs to perform a filter.

The object is designed to work with a text input field and to respond to key presses to perform a filter. Within this structure, it is quite configurable. Lets have a look into the object and how to use it.

To initiate the object, create an instance using the "new" keyword. The constructor of the object takes 3 parameters, the third of which is optional:
  1. field - a reference to the DOM node which the auto filter object will respond to and work with
  2. data - the list of items to filter as an Array
  3. options - some options for how the object should perform
The options
  • objectMember - the array of data to filter can be an array of objects. If it is, the auto filter object needs to know which member on each object in the array contains the filter data. This option defines that.
  • minLength - the minimum number of characters to be entered into the text field before filtering starts. Defaults to 1.
  • hoverCssClass - the css class to add to the node which is hovered over (or selected) by the user once the filtered list is displayed
  • matchAnyCharacter - a boolean value which if true will match the characters entered into the text field against any character in the data list. If false (the default) it only matches from the start of the items in the data list

Events
In addition to these options, you can respond to various events. Pass in event handlers with the options as follows
  • onItemBound - fired when a matching item in the data list is found and bound to the document
  • onItemSelect - fired when the user selects an item from the filtered list
  • onFilteredListDraw - fired after the filtered list of items is added to the DOM tree
The first 2 events defined above run in the scope of the DOM node representing the relevant filtered list item. They both will get passed a parameter containing the original data for that list item. If the original data list was an array of objects, the whole object will get passed.

The third event defined above runs in the scope of the list of items.

The HTML
When the user enters a value into the field which is to support the filtered list, a list of matching items is added to the DOM immediately after the field. Assuming the value in the field is "value", this list will by default appear as follows:

<ul class="autoCompleteList">

<li><strong>value</strong> 1</li>

<li><strong>value</strong> 2</li>

<li><strong>value</strong> 3</li>

</ul>


This HTML can be styled by CSS. The css class defined for the currently hovered over item (or "hover" by default) is added to the appropriate list item.

Selecting an Item
When the user selects an item either by clicking on the item in the displayed filtered list or by using the keyboard (up and down cursor keys to choose an item and enter to select it), the value of that item is written into the field.

That is pretty much all there is to it. Its quite simple really!

JSquared Packages

With the release of JSquared beta 2, I have provided one file containing the full library which is also minified. This file weighs in at 29Kb! I would always recommend using JSquared in its componentized format, just including what you need at any time.

JSquared 1.0 Beta 2

JSquared 1.0 Beta 2 has just gone live and is available for download now.

This version has a number of enhancements over beta 1, not least the deployment method! You can now upgrade from beta 1 to beta 2 by just replacing the old code with the new. I have also provided full versions of the library with all its components in one file in both compressed and uncompressed formats.

There have been a number of improvements and additions since beta 1:

  • Better DOMReady handling
  • Much faster "trim" method on strings
  • New image rollover object - back to the future!
  • Delegate handling pattern
  • New auto filtering object. Highly configurable.
  • A URL manager object for adding entries to the browser history and allowing bookmarking in an AJAX application
  • Loads of little bug fixes
For those who still want it, beta 1 is still available for download as well.

Keep an eye on this blog for more information about all the JSquared features. You should already know about ADIJ!

12 February 2008

Lack of posts

Apologies to all those avid readers out there for the recent lack of posts on this blog.

This is what happens when you are less than 3 weeks from being married!

I will attempt to complete my series on Asynchronous JavaScript techniques (only 3 more parts to go) before heading off to Thailand for 2 weeks for our honeymoon.

Roll on March 2nd...

4 February 2008

HTML 5 and Web Standards

With the recent publishing of the W3C HTML 5 Working Draft, and the debacle which is IE versioning through meta tags, I have been having some thoughts about web standards.

It so happens that I am not the only one! Molly E. Holzschlag has also been thinking. Whilst her thoughts are somewhat more drastic than mine, I felt it time to put forward my thoughts on the next generation of HTML on the web.

HTML 5 is a massive specification introducing many new tags and attributes of which without a doubt my favourite is the irrelevant attribute. I would personally be quite happy to wrap large parts of the spec in such a tag!

I believe strongly in simplification and I do not believe HTML 5 simplifies HTML. What I think we need is less not more. There is one very specific point which grates. HTML should enforce an XML syntax - tags should have to be closed and have to be well formed. HTML 5 allows unclosed tags and this to my mind is a step backwards. Indeed, I see the spec contains code a bit like this:

<dl>

<dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>

<dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>

</dl>


This is some ugly stuff!

I believe HTML 5 should actually be XHTML 5 (or version 2 or whatever version you like!). It should contain a small set of semantic tags including paragraph, emphasis, lists, audio, video, anchors, images, divisions (or sections) amongst others, creating a small set of recognised tags with well defined default rendering for each. As an author, I should be allowed to create ANY OTHER TAG I LIKE as long as it is well formed XML. The default rendering for each unrecognised tag should be as an inline element and they should offer no semantic meaning.

The tags I "create" should be able to be styled through CSS and accessible as DOM nodes via JavaScript.

Its simple. Or is it too simple?