How to Create an Ajax Autocomplete Text Field - Part 4 [con't]
Why Absolute Positioning?
There are four possible
position values to choose from. Each type of
positioning would yield very different effects on our list.
This is the default, so there's usually no reason to explicitly set it. An
position: static always retains its position within the
normal document flow. Hence, a static element ignores any top, bottom, left,
or right declarations (See Figure 7).
position: relativemoves an element relative to its normal position in the document flow. Relative positioning could have worked, but it would be difficult to set the position of our list relative to the Autocomplete text field. Here's what the same
<DIV>element would look like using relative positioning with x, y coordinates of 105 and 202 pixels (See Figure 8).
That is definitely not what we're looking for. There's just too much math to
calculate how to move the
<DIV> to align it under the text field.
An element with
position: absolute is positioned at the specified coordinates
relative to its containing block. The element's position can be specified using
any of the
It turns out that this is the best choice for us, as it's not only the easiest
to position, but it has the added benefit of overlapping other page elements,
which is exactly what we want. Here is the same
<DIV> element as above
but with an absolute x, y positioning of 105 and 202 pixels (See Figure 9).
There is also a value of
fixed, which only works in IE7. It positions
an element at the specified coordinates relative to the browser window. This
causes the element to remain at that position regardless of scrolling.
table#completeTable ID selector defines the appearance of the list
table. There are two properties which we need to set:
border uses named constants for better readability.
width is set to 200 pixels:
There are many border styles available in CSS and the choice above was
completely arbitrary. The important thing is to have some kind of border around
<TABLE> element to differentiate it from the rest of the page.
width works much the same as the
except that the CSS property can apply to any HTML element. The CSS
property also offers more flexibility in terms of measurement units.
Unlike the table
width attribute, which can only denote pixels or a percentage,
width can be in any of the following units of measurement:
|em||1em is equal to the current font size. 2em means 2 times the size of the current font. e.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses|
|ex||one ex is the x-height of a font (x-height is usually about half the font-size)|
|pt||point (1 pt is the same as 1/72 inch)|
|pc||pica (1 PC is the same as 12 points)|
|px||pixels (a dot on the computer screen)|
popupRow class affects the appearance of the table rows. The two
properties that we are setting are the
cursor and the
cursor property sets the mousepointer style. It can be set to just
about any style that your computer supports. You can even set it to a custom
cursor using the
url property! We set it to a
so each row in the
completeTable will appear as a link. Here's
the complete list of possible
The url of a custom cursor to be used.
Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
||The default cursor (often an arrow)|
||Default. The browser sets a cursor|
||The cursor render as a crosshair|
||The cursor render as a pointer (a hand) that indicates a link|
||The cursor indicates something that should be moved|
||The cursor indicates that an edge of a box is to be moved right (east)|
||The cursor indicates that an edge of a box is to be moved up and right (north/east)|
||The cursor indicates that an edge of a box is to be moved up and left (north/west)|
||The cursor indicates that an edge of a box is to be moved up (north)|
||The cursor indicates that an edge of a box is to be moved down and right (south/east)|
||The cursor indicates that an edge of a box is to be moved down and left (south/west)|
||The cursor indicates that an edge of a box is to be moved down (south)|
||The cursor indicates that an edge of a box is to be moved left (west)|
||The cursor indicates text|
||The cursor indicates that the program is busy (often a watch or an hourglass)|
||The cursor indicates that help is available (often a question mark or a balloon)|
background property is set using a named CSS color constant. There
are also system and hyperlink color constants to choose from. If none of these
colors will do, you can also define your own color by using an RGB, RGB percentage
or a HEX number. The table below describes how to denote each type of color
||A color name (e.g. red)|
|rgb(x,x,x)||An RGB value (e.g. rgb(255,0,0))|
|rgb(x%, x%, x%)||An RGB percentage value (e.g. rgb(100%,0%,0%))|
|#rrggbb||A HEX number (e.g. #ff0000)|
Our last class,
popupItem, sets the appearance of the table cells, as
well as the font properties:
The padding property works just like a <TABLE> tag's
attribute does. It sets how much space there is around a element's contents:
white-space property sets how white space inside an element is handled.
There are three possible values, as follows:
|normal||Default. White-space is ignored by the browser|
|pre||White-space is preserved by the browser. Acts like the <pre> tag in HTML|
|nowrap||The text will never wrap, it continues on the same line until a <br> tag is encountered|
We are using
nowrap because we want to avoid wrapping text. It works
the same as the table cell's
The last two properties control the appearance of the font.
font-size: 0.8em; entry sets the font size to slightly smaller
than the browser's normal font size setting. For instance, if the user has their
browser set to display a default font size of 10 pixels, then the text in our
list will appear at eighty percent of 10 pixels, or 8 pixels.
Our final property, the
font-family, sets a prioritized list of font
family names for an element. Examples include: Times, Courier and Arial.
The browser will use the first value it recognizes or use the default if none
are found. Multiple word names have to be enclosed in quotes, as I did with
Lucida Console.You can also define a
as serif, sans-serif, cursive, fantasy or monospace. It's always
a good idea to offer a generic-family name as the last alternative in the
AutocompleteList.css file in its entirety:
We're now one file closer to having a completed Autocomplete text field control!
Next week, we'll write the
the behavior of the popup list in the browser.
About the Author
Robert Gravelle is a Senior Programmer/Analyst for the Canadian Border
Services Agency as well as a freelance IT consultant. Rob specializes in Java,
and multi-tier systems. Feel free to contact Rob at firstname.lastname@example.org should you like more information, but note that, although Rob will do his very
best to respond in a timely manner, due to the volume of emails received, he
cannot guarantee a response to every message.
Original: April 16, 2008