.autocomplete is not a function

I am implementing the Jquery UI autocomplete. I have the following code.

Application.js

 $(function() {
        function log(message) {
            $( "<div/>" ).text( message ).prependTo("#log");
        }

        $("#tags").autocomplete({
            source : function(request, response) {
                $.ajax({
                    url : "/projectlist",
                    dataType : "json",
                    data : {
                        style : "full",
                        maxRows : 12,
                        term : request.term
                    },
                    success : function(data) {
                        var results = [];
                        $.each(data, function(i, item) {
                            var itemToAdd = {
                                value : item,
                                label : item
                            };
                            results.push(itemToAdd);
                        });
                        return response(results);
                    }
                });
            }
        });
    });

Project Controller

 def project_list  
    list=Project.all.map{|i|i.project_name}
    arr= [].concat(list.sort{|a,b| a[0]<=>b[0]}).to_json
    render :json =>arr
  end

_form.html.erb

 <input id = "tags"/>

routes.rb

  match '/projectlist' => 'projects#project_list'

What my above code should do is, list projects. However I am getting the follwoing error in firebug.

$("#tags").autocomplete is not a function
[Break On This Error] sour开发者_开发知识库ce : function(request, response) { 

I have also tried following the example JQuery Ui Autocomplete and no luck and get the same error :S

---

I believe your problem is that you're including the jquery & jquery-ui files in the BODY of your view (in the _form partial). You probably also loaded application.js in the HEAD (probably in your application layout) when you called javascript_include_tag :defaults. Instead, you should call jquery and the ui file before you call the defaults. Or, better yet, include them in the defaults as well by editing your application.rb file in the config folder.

---

As stated above in a comment, this error is commonly seen when the jquery & jquery ui files aren't loaded properly.

Use normal HTML tags to reference them first:

<script type="text/javascript" src="Content/jquery_core.js"></script>
<script type="text/javascript" src="Content/jquery_ui.js"></script>

... and be sure to link the core file before the ui file, as above. Reversing the order will also cause the error.

---

It appears that although you've included jquery ui, it's not being loaded. Check your browsers console for javascript errors. If you're using chrome or safari the network tab of the developer tools might indicate that the jquery ui file isn't being loaded.

---

It appears that the reason why I was recieving this error was because of the ordering of my the 'jquery' and 'jquery-ui-1.8.14.custom.min' in the application layouts file. Thank you for responding.