Learning JavaScript

The Yahoo! UI

In Chapter 13, we had a chance to play with Google Maps’ API, and in this chapter we’ll give Yahoo! a chance to show its Ajaxy stuff.

The Yahoo! UI Library is a complete set of files that provides numerous functionality; some are basic DHTML effects, and others use Ajax to integrate with the Yahoo! search engine. To use the library, first download and unzip it from the Yahoo! UI site (http://developer.yahoo.com/yui/). This site also provides documentation, and there are numerous examples installed with the library.

Since there are well-documented examples and API calls included with the UI, I’m going to walk through one of existing examples rather than create any new ones. In this case, I’m going to take a closer look at the AutoComplete control being used with data accessed from Flickr, the photo-sharing service.

You can find examples of the AutoComplete control use in the examples/autocomplete subdirectory, and loading the index.html page allows you to pick whether you want to try out AutoComplete with JSON or with in-memory array, and so on. I clicked the “Query Flickr Web Services for XML” option.

Once the page opens, a logger console that can be collapsed is shown on the right side of the page, and a form field to enter Flickr tags is just below the application description. As you enter the tag information, the console provides information about the program’s progress, and as you type, thumbnails of pictures that match tags with whatever letters you’ve typed are ...