Setting an Initial Value

Similar to how a <select> element can have a selected <option> when the page loads, so to can Marco Polo be set with an initially selected value (or previously selected value in the context of an edit page).

Input value

If you're working with simple string values (as opposed to more complex values in JSON format), the standard value attribute of the <input> can be set with the selected value:

<input type="text" name="userSearch" id="userSearch" value="Win Butler">

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

Input data-selected

For more complex data in JSON format, the recommended method — which properly keeps your HTML separate from your JavaScript — is to set the selected 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;, … }">

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

selected Option

The third and final method is to specify the selected value in the selected option:

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