BeauScott.com

I’ve completed an update/rewrite of my AutoComplete (Google suggest) widget. It now also includes a complete API document similar to the HelpBallons API.

Examples: http://www.beauscott.com/examples/autocomplete

Download: http://www.beauscott.com/examples/autocomplete/autocomplete.zip

SVN: svn://beauscott.com/widgets/AutoComplete

As always, please let me know if you have any issues or suggestions.

Beau

I’ve completed my updating of my aging AJAX help balloons / tool tips / dialog balloons / whatever you want to call them.

New features included:

• Less library dependence. It’s still prototype.js-based and dependent, but no longer requires Scriptaculous nor the prototype “improvement” script that they previously used. You can optionally still use Scriptaculous if you want the sexy fading effects. Just include the scriptaculous.js file in your document and the balloons will detect it and use it, no configuration needed. (However, if you want to use different Scriptaculous effects than the standard Fade and Appear, you can set the hideEffect and/or fadeEffect options to whatever you want… Doesn’t even have to be Scriptaculous, just Scriptaculous-compatible)
• Use any object as an anchor point. This was available in later revisions of v1, but I’ve solidified it’s support. Simply assign the anchoring element as the balloon’s icon property at instantiation. (See the example page for details)
• Anchor postioning control. This feature allows you to move the anchor around within your icon for fine-tuning the balloon’s display. (See the example page for details)
• Non-caching remote data requests. If you’ve ever tried to use v1 of the balloons with dynamic data, you’d know that once the balloon makes it’s first request, it caches the request result and would not make subsequent calls for fresh data. You can now force the balloon to make a fresh request before each showing using instantiation options. (See the example page for details)
• Fixed direction assignment. By default, the balloons will position themselves based on available realestate, but you can now assign a fixed direction using instantiation options. (See the example page for details)
• Still 100% free, now released under the MIT open source license.
• Better organized and fully commented/documented code. This was a complete refactor/rewrite of the code base, and I made sure to comment the code very thoroughly and try to explain my reasoning (or insanity) as best I could. In addition, I’ve written a proper API page, and have revisited the examples page.

As always, I’m eager to hear feedback — be it wishes, comments, praises or curses. Thanks to all that provided feedback on v1, it was tremendously valuable.

Click here to download the full widget (includes images, HelpBalloon.js, prototype.js 1.6.0.2, and scriptaculous 1.8.1) 556k zip.

Or you can get the latest via SVN:  svn://beauscott.com/widgets/HelpBalloons

Click here for the API Page

Click here for the Example Page

Update: I’m right in the middle of adding new feature documentation, so the docs are a little wonky. I’ll fix shortly.

David Wallace @ SearchEngineWatch.com has written an interesting article on the effect of new-age web technologies like AJAX and Web2.0 on search engine crawlability. While I wasn’t aware of the impact of CSS on search engine behavior, and the impact of Web2.0 applications like Wikis and other community-driven technologies is somewhat obvious, he makes a very good point of the potentially negative impact of AJAX (or excessive AJAX) on search engines’ abilities to crawl and index your site. Wallace points out that because of the nature of AJAX, and the inability of search engines to interact with JavaScript, AJAX enabled websites will experience some hindrance of crawlability. While this is true, this can be minimized by following some basic guidelines when implementing AJAX on your web application:

• Do not make your application UI completely AJAX driven unless it is in an environment that you do not wish to have indexed. For example: Google’s GMail is a very well-done AJAX application that effectively uses no static HTML. Every component is rendered via JavaScript in some fashion. However, since this UI is only displayed to the user after they have signed in, a search engine would never see the content anyway.
  An prime example of AJAX gone wrong is Gucci.com, who’s entire public site — as attractive as it is — is unreachable without JavaScript support. Having said that…
• Try viewing the page with JavaScript disabled in your browser. This will help you to see what the search engine will see. A good tool to quickly toggle JavaScript support in FireFox is Chris Pederick’s WebDeveloper Plugin. Simply right-click the window, go to Web Developer -> Disable -> JavaScript.
  If you try this on Gucci.com, you’ll notice that the only thing you get is a blank screen. They may be trying some clever hack like User-Agent detection to show search engines a different set of content, but judging from a simple Google search on their domain name, I severely doubt that is the case (notice that the first few search results are blank except the domain name itself).
• AJAX widgets add a lot of pizazz to a user’s experience on your website, but they should be used to deliver minimal content to the page, if any. Utilities like the HelpBalloons I offer here do bring content to a page dynamically, but are not intended to do heavy lifting. They are meant to add context to
• Use the <noscript> tag to add static content to areas that would regularly have valuable content populated via AJAX.

If used properly AJAX can significantly improve a user’s experience by adding standalone application feel to an otherwise boring web site. If used improperly, AJAX can severely hurt your site’s potential by cutting off search engine indexing.

Please feel free to suggest more best-practice guidelines to append to this list.

Thomas Fuchs of Mir.aculo.us has posted some examples of the new Morphing effects in Scriptaculous’s 1.7 beta effects library. Looking good

I’ve never really liked the floating-DIV approach to existing AutoCompleters (like Google Suggest). I figure: why break the UI? So in my approach I use a regular HTML SELECT object to serve the options. Again, this widget is based on the prototype.js library. And, again, the API is very simple and flexible.
Click here to see the example.

Click here to download this widget.
Update: I’ve made a few updates to the script to better handle all keyboard and mouse interactions. I’ve tested it on PC Mozilla (FF), IE and Opera — I’d love some feedback from the Mac community.

Update #2: I’ve enabled optional Scriptaculous effects. Simply include the scriptaculous library somewhere in your HTML and this widget will use the blinding effects.