The Bungee Blog

Get it now. I’m serious. YSlow’s there, Firebug 1.2 beta’s there, Web Developer Toolbar’s there, and it just kicks the living crap out of Firefox 2 for performance, not to mention all the cool dev-oriented stuff like more advanced JS, better extension stuff, better <canvas>, better SVG, better support for cutting-edge standards, and the like.

Get it now. Get it today.

A few days ago, an astute reader of the book, Bharat Ruparel, requested an example of multiple-update autocompletion on the book’s forums. I thought it would make for a nice demo page and a post here, so here you go, Bharat.

The main idea behind autocompletion with script.aculo.us is that the possible results are sent as a <ul>/<li> list, one list item per result, and the full textual contents of an item (including line breaks and whitespace), except whatever contents sits inside an element with a CSS class named “informal,” are extracted to provide the completed text.

This behavior can be altered, however, mainly through two means:

• Using the select option to provide a CSS class name marking which textual contents to use (any other textual contents will be ignored)
• Providing a custom extraction logic in addition to the default one through the afterUpdateElement callback.

Both these are discussed in the book (chapter 16, which is 20 pages), but the callback approach isn’t demonstrated in-depth. For this post, I prepared a detailed demo page that I invite you all to go through. It contains detailed explanative material around each step, from the most basic call to the full-fledged one, and tries to demonstrate the snags you can hit and how to achieve more advanced completion.

Check out the full demo page!

I hope this helps, and perhaps even provides a few of you with that “Aha!” moment I cherish.

Cheers,

A reader just brought an issue with the book’s Builder demo (chapter 17) to my attention.

The code that ships with the demo essentially grabs code pieces from the page itself, where they are displayed in table cells, to run this code live and display its result. In doing so, it attempted to go the extra mile and strip single-line comments from the code before eval‘ing it; it isn’t mandatory, it just felt cleaner at the time.

However, the regular expression used b0rks on IE7. I’m surprised nobody alerted me to that in almost 7 months since the book’s final release…

To get it to work in IE7, simply strip the clean-up line from the code. That’s the following line:

code = code.replace(/^\s*\/\/.*$/mg, '');

This will work just fine on all browsers now.

Thanks to Bharat for the heads up!