Lazy Load DataSource for YUI

I'm a fan of the DataSource concept in the YUI libary. It's a very logical construct for abstracting data in JavaScript. Not only does it abstract data formats (XML, JSON, HTML, text), but it generalizes the retrieval as well (local static data, function, AJAX). The result of all this is a a uniform data access mechanism for different UI components like the DataTable and AutoComplete.

While working on some auto-completing features for a project I realized that there was a remote retrieval mechanism missing. I had small datasets that I wanted to retrieve on demand in a single request. I thought to use the XHRDataSource at first, but there would continue to be multiple requests with each letter I typed.

To solve my requirement for a lazy, single-request data source, I created the (obviously named) LazyLoadDataSource. It's much like the XHRDataSource, except it expects to retrieve all the data in a single request. Now I can create more efficient auto-completes that can retrieve data on demand while keeping requests to the server at an absolute minimum.

Here is an example that 'screen scrapes' an HTML document of names. It makes use of the YUI AutoComplete to illustrate the LazyLoadDataSource. I recommend the use of Firebug or something similar to keep track of the server calls the page makes and notice that only a single one is made when needed.

To ensure the single request rule, the LazyLoadDataSource provides initial queueing support. The concept is to queue up requests until the remote data is retrieved. Once it is, all pending requests are processed.

Code for the LazyLoadDataSource can be found here. I probably have not commented the code enough, but it's small and I hope it speaks for itself.

NOTE: It'd be wrong to not give a quick shout out to generatedata.com, where I got my names data from. It's a site I just found and plan on using in the future to generate test data to play with.