jQuery autocomplete is showed in the wrong place

Question

Below is my code

HTML:

<input autofocus="autofocus" type=text  id="modelloInput" style="width: 97%; outline:none; border:none; margin-left: 7px; float: left;" />

JS:

<script type="text/javascript">
            var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];

            $(document).ready(function () {
                $('#modelloInput').autocomplete({

                    source: availableTags

                });
            }); 
</script>

It is working but I see the "autocomplete list" really far from the input and with the dot before the names like a html list.

What could be the issue? I guess it as CSS issue.

Answer 1

I think you just didnt implement the UI css:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css