CODEWITHSUNDEEP
javascriptjqueryjquery-ui
wootscootinboogie
wootscootinboogie

Reputation: 8695

jQueryUI Autocomplete appending menu to wrong element

I've got a text box with auto complete functionality from jQueryUI. I want to append the results to a div with the id of #catcher. Currently, the results are only appended directly below the text input. You can see where I tried to specify the appendTo option in the autocomplete initialization, and when I write the appendTo option to the console, it prints the correct id, and yet the results are not appended there. Why are the results from the autocomplete being appended in the wrong place?

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;
}

Upvotes: 0

Views: 236

Answers (1)

Rajesh
Rajesh

Reputation: 3778

I think it happens because catcher div is floated to right. Not sure. Try removing the float and see.

I have created a fiddle for the same. Not it appends to the catcher element. But not sure what behavior you want after append. May be you can take off from there. Fiddle: http://jsfiddle.net/FbRFj/

you can override the internal 

_renderItem

to directly append results to a completely different element,

Upvotes: 1

Related Questions