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).

The onSelect callback is triggered just as if the value were selected from the results list. The only difference is the third onSelect parameter, initial, is set to true. This can be helpful when only needing to execute certain code for the initially selected value.

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">

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',
    …
  }
});