HTML Breakdown

The HTML of Marco Polo is very straightforward and easy to grasp. Start with a text input:

<input type="text" name="citySearch" id="citySearch" />

After Marco Polo is attached, the HTML changes slightly:

<input type="text" name="citySearch" id="citySearch" class="mp_input" autocomplete="off" />
<ol class="mp_list" />

Let's break down each element.

Input

<input type="text" name="citySearch" id="citySearch" class="mp_input" autocomplete="off" />

The original text input has autocomplete="off" added to prevent the browser's autocomplete functionality from interfering.

Results List

<ol class="mp_list" />

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

Result Item

<li class="mp_item mp_selectable">Calhoun, GA</li>

Each JSON result is passed to the formatItem callback option before being added to the results list. Here's an example with a number of different result items:

<ol class="mp_list">
  <li class="mp_item">United States</li>
  <li class="mp_item mp_selectable">Calabasas, CA</li>
  <li class="mp_item mp_selectable mp_highlighted">Caldwell, ID</li>
  <li class="mp_item mp_selectable">Calhoun, GA</li>
  <li class="mp_item">Canada</li>
  <li class="mp_item mp_selectable">Caledon, Ontario</li>
  <li class="mp_item mp_selectable">Calgary, Alberta</li>
</ol>

As you can see, a result item can have a variety of different classes:

• mp_item

  Each list item gets this class.

• mp_selectable

  Each list item that's selectable gets this class. By default, all items are selectable, but this is configurable through the selectable option. In the above example, selectable has been configured to exclude the country headers, making them unselectable.

• mp_highlighted

  Denotes the list item that's currently highlighted, either through keyboard navigation or mouseover. Only one item at a time can have this class.

No Results

<li class="mp_no_results"><em>No results for <strong>Pishitaw</strong>.</em></li>

When a request is made that returns zero results, an item is given the class mp_no_results and passed to the formatNoResults callback option.

Minimum Characters

<li class="mp_min_chars"><em>Your search must be at least <strong>3</strong> characters.</em></li>

When a request is made that doesn't meet the minChars length option, an item is given the class mp_min_chars and passed to the formatMinChars callback option.

Error

<li class="mp_error"><em>Your search could not be completed at this time.</em></li>

When a request is made that fails during the ajax request, an item is given the class mp_error and passed to the formatError callback option.