How to add ahead user picker to a velocity template

[Marek Cendrowicz [Transition Technologies S.A.]]

I'd like to reuse the OOTB ahead user picker (like for OOTB Reporter field) in my custom wizard (velocity template in-use).
I cannot find any kind of guide, relevant answer or best practice.
My target JIRA is 6.2.

I will really appreciate any hint, link, or piece of code.

Thanks!

[Andy Brook [Plugin People] · Accepted solution]

its mainly done with css, here is what I use:

<div class="field-group">
    <label for="reporterUserName">reporter</label>
	<select  id="reporterUserName" class="js-default-user-picker single-user-picker" name="reporterUserName">
            <option selected="selected"
                    style="background-image:url('$action.getUserAvatarUrl($!config.getReporterUserName())')"
                    value="$!config.getReporterUserName()">
                    $!config.getReporterUserName()
            </option>        
    </select>
</div>

The option is for presenting a previously set value, remove if you dont need that.

[Marek Cendrowicz [Transition Technologies S.A.]]

That gave me what I needed actually.
BTW I programmed also an user picker basing on following example:
https://bitbucket.org/atlassian_tutorial/connect-select2-user-picker.

But less custom code is always better.

Thanks a lot Andy!