Setting an Initial Value

Similar to a <select> element having a selected <option> when the page loads, so to can Marco Polo be set with an initially selected value.

Input data-selected

The recommended method for doing this — which properly keeps your HTML separate from your JavaScript — is to set the selected value (string or JSON object) in the data-selected attribute of your <input>:

<input type="text" name="userSearch" id="userSearch" data-selected="{ &quot;first_name&quot;: &quot;Win&quot;, … }" />

When Marco Polo is initialized on the <input>, the data-selected value is automatically parsed and the onSelect callback is trigged, just as if the value were selected from the results list.

Important: Be sure to properly encode the string of JSON!

selected Option

The initially selected value can also be specified with the selected option:

$('#userSearch').marcoPolo({
  selected: {
    first_name: 'James',
    last_name: 'Butler',
    profile_url: '/users/78749',
    …
  }
});

selected Method

The third and final method can be used to set the initial value on page load, but is mostly used any time thereafter to programmatically change the selected value:

$('#userSearch').marcoPolo('selected', { first_name: 'James', … });