css of jquery ui autocomplete not being applied

Question

I'm trying to implement jQuery ui's autocomplete. It's working, except that the css isn't being applied.
1) The list of colleges that appears is styled like a normal ul.
2) "11 results are available, use up and down arrow keys to navigate" shows up and I don't want it to.

See my my website to see it live.

I want it to be like the default functionality here.

I followed the advice here to install jQuery ui, and here to install themes.

Here is my code. What can I do to get the styling to be like the default functionality example?

application.html.erb

 <%= form_tag("/search", :method => 'get', :id => 'search_text', :class => 'form_search ui-autocomplete') do -%> 
    <div id="search"> <%= search_field_tag :search, params[:search], :placeholder => 'enter college', :id => "search_field", :class => 'input-medium search-query ui-autocomplete' %> </div>
<% end -%>

home.js

    $("#search_field").autocomplete({
      source: [
      "Adelphi University",
      "American University",
      "Andrews University",
      "Arizona State University",
      "Ashland University",
      "Auburn",
      "Wheaton - Illinois",
      "Wheaton - Massachusetts",
      "Whitman",
      "Wofford" ]
    });

$("#search_text").submit(function() {
        if ($("#search_field").val() == "Adelphi University")
        {
            window.location.href = "/adelphi-university";
            return false;
        }
        else if ($("#search_field").val() == "American University")
        {
            window.location.href = "/american-university";
            return false;
        }
        else if ($("#search_field").val() == "Andrews University")
        {
            window.location.href = "/andrews-university";
            return false;
        }
   });

UPDATE (not sure if relevant, but...)

college.rb

class College < ActiveRecord::Base
  attr_accessible :name, :url, :public, :years, :category, :calendar, :location, :setting, :retention, :created_at, :updated_at, :graduation4, :graduation6, :degrees, :rotc, :sat_submit, :act_submit, :sat_math_25, :sat_math_75, :sat_reading_25, :sat_reading_75, :sat_writing_25, :sat_writing_75, :sat_composite_25, :sat_composite_75, :act_math_25, :act_math_75, :act_english_25, :act_english_75, :act_writing_25, :act_writing_75, :act_composite_25, :act_composite_75, :acceptance_rate, :enrolled, :gpa375, :gpa35, :gpa325, :gpa3, :gpa25, :high_school_tenth, :high_school_quarter, :high_school_half, :sat_math_700, :sat_math_600, :sat_math_500, :sat_math_400, :sat_math_300, :sat_reading_700, :sat_reading_600, :sat_reading_500, :sat_reading_400, :sat_reading_300, :sat_writing_700, :sat_writing_600, :sat_writing_500, :sat_writing_400, :sat_writing_300, :act_composite_30, :act_composite_24, :act_composite_18, :act_composite_12, :act_math_30, :act_math_24, :act_math_18, :act_math_12, :act_english_30, :act_english_24, :act_english_18, :act_english_12, :very_important, :important, :considered, :student_faculty, :class_20, :class_49, :class_50, :majors, :law, :business, :medical, :other_grad, :us_news_ranking, :top_25_grad, :enrollment, :graduate_enrollment, :in_state, :out_of_state, :male, :female, :ethnicity, :frats, :sororities, :on_campus, :freshman_on_campus, :in_state_tuition, :out_of_state_tuition, :room_and_board, :with_need_got_aid, :got_need_fully_met, :percent_need_met, :scholarships, :loans, :cost_30, :cost_48, :cost_75, :cost_110, :cost_111, :requirements, :majors_offered_link, :ap_credit, :scholarships_link, :map, :street_view, :housing, :food, :weather, :dorms, :dorm_urls, :science_majors, :social_science_majors, :humanities_majors, :business_majors, :engineering_majors, :professional_majors, :area_studies_majors

  def self.search(search)
    if search
      find(:all, :conditions => ['UPPER(name) LIKE ?', "%#{search.upcase}%"])
    else
      find(:all)
    end
  end

end

static_pages_controller.rb

def search
  @colleges = College.search(params[:search])
end

UPDATE - Did I Install jQuery UI Themes Properly?

• I used this.
• When I run bundle install, this all shows up: Using jquery-rails (2.2.1) Using jquery-tablesorter (1.5.0) Using jquery-ui-rails (4.0.4) Using jquery-ui-themes (0.0.11)
• application.css has *= require jquery.ui.all *= require jquery-ui/smoothness *= require_self *= require_tree .
• I was confused by "Helper" and "Rake Tasks". They don't seem applicable for me.

UPDATE - Development Environment

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 861px; position: relative; top: -858.03125px; left: 715px;">
    <li class="ui-menu-item" role="presentation"><a id="ui-id-2" class="ui-corner-all" tabindex="-1">Adelphi University</a></li>
    <li class="ui-menu-item" role="presentation"><a id="ui-id-3" class="ui-corner-all" tabindex="-1">American University</a></li>
    <li class="ui-menu-item" role="presentation"><a id="ui-id-4" class="ui-corner-all" tabindex="-1">Andrews University</a></li>

Answer 1

It looks like the application.css manifest may not be loading. Ensure the following is in whatever layout you're using:

<%= stylesheet_link_tag "application", media: "all" %>