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.
I want it to be like the default functionality here.
I followed the advice here to install it.
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') do -%>
<div id="search" class="ui-autocomplete"> <%= search_field_tag
:search, params[:search], :placeholder => 'enter college', :id =>
"search_field", :class => 'input-medium search-query' %></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;
}
});