JQuery autocomplete dropdown menu position

I am using the jQuery autocomplete widget in my project. It is working fine expected that the dropdown menu appends to the body instead of the input. My Codes are as follows:

html

    <div class="flddiv fw"  id="mealcommentsdiv">

    <input id="foodautotest"  type="text" placeholder="autocomplete">

</div>

Javascript

function getVectors(VectorTypeID) {

Vectortype[VectorTypeID]={}

return $.ajax

({

    url: "functions.php",

    data: {
        method: "getvectors",
        VectorTypeID:VectorTypeID
    },

    method: "post",

    dataType: 'json',

    success: function(result)

    {
        Vectortype[VectorTypeID]=result



        switch(VectorTypeID){

            case 1:

                $.each(result,function(key,value){

                    strfoods.push(value)

                })

                $( "#foodautotest" ).autocomplete({
                    source: strfoods,
                    appendTo: "#foodautotest",

                }

                })
                break
        }

    }

});

}

The site uses a ccs grid structure

Thanks for your help

from JQuery autocomplete dropdown menu position