Dialog: Using AutoComplete in a Dialog

Date: September 19, 2006

Component: Dialog, AutoComplete

Version: v0.11.3

Click here to show the Dialog.

This example explores issues surrounding the placement of an AutoComplete control within the context of a Dialog control.

The primary issue you'll run into with this combination (or in any situation where AutoComplete resides within an Overlay or Panel) is the behavior when the AC suggestion container descends below the visible area in the Dialog body. The AC suggestion container is absolutely positioned in most implementations, so it is not part of the Dialog body's dimensions (and won't, therefore, cause the dialog body to resize to fit it; as a result, overflow:hidden on the Dialog's containing div or on the Dialog's body will cause the AC suggestion container to be clipped when it descends below the boundaries of the Dialog body.

This leaves two principal options for AC-in-Dialog implementations:

  1. Put the AC suggestion container in an Overlay: An AC suggestion container that is itself an Overlay, rendered into the body of the document, allows the container to float above the context of the Dialog and not be clipped by the Dialog's dimensions. Disadvantage: Because it's not part of the page flow within the Dialog, the Overlay solution will not automatically move with the Dialog during screen resize, font zoom, or Drag and Drop. There are ways to account for these contingencies, but they add complexity.
  2. Implement a standard AC suggestion container, leaving room in the Dialog for it to descend without overflowing the Dialog body: This is the solution I recommend. It allows for a contextual flow for the AC suggestion container and for the usual anchoring of the suggestion container to the input or text field with which it is associated. This anchoring holds automatically during drag, window resize, or font zoom. Disadvantage: This solution does not generally allow the AC suggestion container to descend beyond the boundaries of the Dialog. Care must be exercised in design to provide enough space for the suggestion container to descend to its maximum height without hitting the bottom edge of the dialog body.

An implementation of the second option above appears on this page. Its CSS adopts the standard conventions for AC that appear in the AC examples provided on YDN. Overflow, by default set to hidden for the Dialog body class, is left at the default.

Markup for the Dialog encompasses the usual markup for an AutoComplete implementation. Of course, a real-world implementation will include the form apparatus, labels, buttons, etc.

In our script, we instantiate the Dialog, then build the AC datasource and AC instance:

With this code in place, our in-Dialog AutoComplete is fully functional.

My Dialog, Using AutoComplete on the Form Field

State:

Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat. Lorem ipsum dolor sit amat.

Eric Miraglia, Yahoo Presentation Platform Engineering

(c)2010 Yahoo Inc.