This tutorial is an extension of the
Skinning a Gaia Ajax Window and I strongly recommend you read that one since 90% of the job of skinning a Gaia Ajax AutoCompleter is actually FINISHED when you've skinned the Ajax Window. Also to see the Gaia Ajax AutoCompleter in action visit the
AutoCompleter samples page, there you'll see two different skins,
spread and Mac OS X. (hint; write something anything will do into the text fields of that sample page...)
Now I assume you're finished reading the tutorial about skinning the Gaia Ajax Window, so now on to our AutoCompleter :)
The above code is the skin for the Mac OS X Skin of our Ajax AutoCompleter and can be found in the samples directory in the "mac_os_x.css" file. You'll see that there are no more than 5 classes there. The first one which is the
input.mac_os_x_autocomplete class is actually for the TextBox of the AutoCompleter. Here you can set fonts, size, border styles etc of the TextBox that accompanies the Gaia Ajax AutoCompleter. Internally the AutoCompleter actually inherits from the Gaia Ajax TextBox so in fact all the properties that you have on a "normal" ASP.NET TextBox is also available for the Gaia Ajax TextBox.
The
div.mac_os_x_autocomplete class is for for the main
wrapper part of the AutoCompleter or the
main rendering surface of it. Onto this surface EVERYTHING will be rendered, including also the border tables for the Window Skin parts. Set whatever you wish for here, though some properties are not supposed to be tampered with. The
position style being one of those.
In the three next classes you'll see that the Gaia Ajax AutoCompleter is in fact created as a
bulleted list or
<ul> HTML element. A bulleted list have
li elements inside of it which are the specific list items. There's no real magic to this except for the last class. In the last you'll see that it is being postfixed with the "selected" class. This is the one that functions as the
currently selected item or with other words; The item that you've either used the cursor keys to highlight or the mouse to hover above!
And that's it in fact!
Nothing more to worry about when you want to skin a Gaia Ajax AutoCompleter.
Have fun :)