How to Create an Ajax Autocomplete Text Field - Part 4 / Page 3 | WebReference

How to Create an Ajax Autocomplete Text Field - Part 4 / Page 3


[prev]

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.

static

This is the default, so there's usually no reason to explicitly set it. An element with 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).

relative

An element with position: relative moves 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.

absolute

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 left, top, right and bottom properties. 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.

The table#completeTable ID selector defines the appearance of the list table. There are two properties which we need to set: border and width. The border uses named constants for better readability. The table 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 the list <TABLE> element to differentiate it from the rest of the page. The width works much the same as the <TABLE> width attribute, except that the CSS property can apply to any HTML element. The CSS width property also offers more flexibility in terms of measurement units. Unlike the table width attribute, which can only denote pixels or a percentage, the CSS width can be in any of the following units of measurement:

Unit Description
% percentage
in inch
cm centimeter
mm millimeter
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)

The popupRow class affects the appearance of the table rows. The two properties that we are setting are the cursor and the background color:

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 pointer so each row in the completeTable will appear as a link. Here's the complete list of possible cursor values:

Value Description
url

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

default The default cursor (often an arrow)
auto Default. The browser sets a cursor
crosshair The cursor render as a crosshair
pointer The cursor render as a pointer (a hand) that indicates a link
move The cursor indicates something that should be moved
e-resize The cursor indicates that an edge of a box is to be moved right (east)
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resize The cursor indicates that an edge of a box is to be moved up (north)
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west)
s-resize The cursor indicates that an edge of a box is to be moved down (south)
w-resize The cursor indicates that an edge of a box is to be moved left (west)
text The cursor indicates text
wait The cursor indicates that the program is busy (often a watch or an hourglass)
help The cursor indicates that help is available (often a question mark or a balloon)

The 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 unit:

Unit Description
color_name 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 cellpadding attribute does. It sets how much space there is around a element's contents:

Padding property

The white-space property sets how white space inside an element is handled. There are three possible values, as follows:

Value Description
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 nowrap attribute.

The last two properties control the appearance of the font.

The 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 generic-family such 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 font-family list.

Here's 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 AutocompleteList.js JavaScript file, which will govern the behavior of the popup list in the browser.

References

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, Perl, ASP, Microsoft application automation, JavaScript, VBScript, Web Development and multi-tier systems. Feel free to contact Rob at rgconsulting@robgravelle.com 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

Digg This Add to del.icio.us


[prev]