Showing a Busy Indicator

Showing a busy indicator is a common pattern with autocomplete inputs, especially for users on slower connections, or for requests that take longer to respond. Marco Polo makes integrating such an indicator easy by automatically toggling a CSS class on the input's parent element. Here's how it works.

Say you have an input with Marco Polo attached that's contained within a <form>:

<form action="/city/search" method="get">
  <input type="text" name="citySearch" id="citySearch" class="mp_input" autocomplete="off">
  <ol class="mp_list" />
</form>

Each time an ajax request is made by Marco Polo to retrieve results, the class mp_busy is added to the parent <form>. You can hook into this class with CSS to show and hide whatever type of busy indicator you use. A common one is a spinner image, so let's add one after the input:

<form action="/city/search" method="get" class="mp_busy">
  <input type="text" name="citySearch" id="citySearch" class="mp_input" autocomplete="off">
  <ol class="mp_list" />
  <img src="/images/busy.gif">
</form>

Now, with CSS, we want to hide the spinner image by default:

form img {
  display: none;
}

And display the image when the <form> has the class mp_busy:

form.mp_busy img {
  display: inline;
}

Marco Polo automatically takes care of adding and removing the mp_busy class to the input's parent element (whether a <form> or anything else), which is one less thing you have to worry about as a developer.