css of jquery ui autocomplete not being applied

css of jquery ui autocomplete not being applied

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>