HTML Breakdown

A text input field by itself is very straightforward:

<input type="text" id="recipients" name="recipients">

Manifest strives to remain as simple as possible, but still requires a few additional elements to work:

<div class="mf_container">
  <ol class="mf_list" />
  <input type="text" id="recipients" name="recipients" class="mf_input mp_input" autocomplete="off" style="width: 18px;">
  <measure class="mf_measure" style="…">---</measure>
</div>
<ol class="mp_list" />

Don't freak out! Let's breakdown each element.

Container

<div class="mf_container">

The container wraps the three core Manifest elements and now acts as, and should be styled as, the input field. Why? Because we want the selected items to appear inside of the input field, without actually being text in the input field. And, as you'll soon discover, the real input field will be changing size quite often.

List of Selected Items

<ol class="mf_list">

This empty, ordered list is created and inserted directly before the input field for displaying selected items. Things really don't get interesting, however, until an item is added to the list.

Selected Item

<li class="mf_item">
  "Lindsay Weir" ([email protected])
  <a href="#" class="mf_remove" title="Remove">X</a>
  <input type="hidden" class="mf_value" name="recipients_values[]" value="[email protected]">
</li>

Each item has three components: display, remove link, and value. All three can be formatted using callback options.

Display

"Lindsay Weir" ([email protected])

By default, the display is taken from the selected Marco Polo item if no formatDisplay callback option is specified. Or, if arbitrary values are allowed (by setting required to false), the text entered is used as the display.

Most of the time, however, you'll need more control over what's displayed. formatDisplay gives you that control. For example, to build a pretty email address like above, your callback function might look like this:

formatDisplay: function (data, $item, $mpItem) {
  return '"' + data.name + '" (' + data.email + ')';
}

Remove Link

<a href="#" class="mf_remove" title="Remove">X</a>

The remove link allows an item to be removed from the list through a mouse click. This is the default output of the remove link, but it can be completely customized through the formatRemove callback option.

Value

<input type="hidden" class="mf_value" name="recipients_values[]" value="[email protected]">

Finally, the hidden input value is used to store the value that will represent the item when the parent form is submitted. By default, the text portion of the display is used for this value. However, it's common to use this value to store the ID of whatever was selected, in which case you would use the formatValue callback option.

Input

<input type="text" id="recipients" name="recipients" class="mf_input mp_input" autocomplete="off" style="width: 18px;">

With the container acting as, and styled as, the input field, the real input field is free to play by its own rules.

First, keep in mind that this field is styled to appear invisible, blending in with the background of the container. We don't want it to appear that there's an input field within an input field (the container).

Second, notice by the mp_input class that Marco Polo has been attached to the field to provide autocomplete functionality. The corresponding results list can be found directly after the container.

Third, and much more intriguing, is the 18px width of the input field. Add and remove a few characters, and you'll see that the width expands and contracts. Why? Because we want the input to appear on the same line as the selected items for as long as possible. By keeping the field only as wide as the inputted text (with enough room for the next character), the text won't wrap to the next line until it reaches the edge of the container.

Measure

<measure class="mf_measure" style="…">---</measure>

Created and inserted directly after the input field, the measure is hidden and used behind the scenes to compute the width of the input text. This computed width is then used to size the actual input field, as described above. And the ---? That's a sort of buffer to ensure there's enough space for the next character.

Marco Polo Results List

<ol class="mp_list">

The final element is an empty, ordered list created and used by Marco Polo to display its autocomplete results. Check out Marco Polo's HTML Breakdown for further details.