jQueryUI Автозаполнение добавления меню к неправильному элементу

У jQueryUI есть текстовое поле с автоматической полной функциональностью. Я хочу добавить результаты в div с идентификатором #catcher. В настоящее время результаты добавляются непосредственно под текстовым вводом. Вы можете увидеть, где я пытался указать параметр appendTo в инициализации автозаполнения, и когда я пишу параметр appendTo на консоли, он печатает правильный идентификатор, и все же результаты там не добавляются. Почему результаты автозаполнения добавляются не в том месте?

JS

 $(document).ready(function ()
            {

                $('#nameAutoComplete').autocomplete(
                {

                    source: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
                    appendTo: '#catcher'

                });
                //prints #catcher to the console
                console.log($('#nameAutoComplete').autocomplete('option', 'appendTo'));


            });

HTML

<form id="form1" runat="server">
    <div>
    <input name="nameAutoComplete" type="text" id="nameAutoComplete" />
    //results should be appended here 
    <div  id="catcher"></div>
    </div>
    </form>

CSS

#catcher
{
    border: 3px dashed #ccc;
    width:250px;
    min-height:500px;
    float:right;
}