未应用 jquery ui 自动完成的 css

Question

我正在尝试实现 jQuery ui 的自动完成功能。一切正常，只是未应用 css。
1) 出现的大学列表的样式类似于普通的 ul。
2) 出现“11 个结果可用，使用向上和向下箭头键导航”，我不希望它出现。

查看我的 my website现场观看。

我希望它像默认功能一样 here .

我听从了建议 here安装 jQuery ui 和 here安装主题。

这是我的代码。我该怎么做才能使样式类似于默认功能示例？

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;
        }
   });

更新(不确定是否相关，但是......)

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

更新 - 我是否正确安装了 jQuery UI 主题？

• 我用了this .
• 当我运行 bundle install 时，这一切都显示出来了:使用 jquery-rails (2.2.1) 使用 jquery-tablesorter (1.5.0) 使用 jquery-ui-rails (4.0.4) 使用 jquery-ui-themes (0.0.11)
• application.css 有 *= require jquery.ui.all *= 需要 jquery-ui/平滑度 *= require_self *= require_tree .
• 我对“Helper”和“Rake Tasks”感到困惑。它们似乎不适用于我。

更新 - 开发环境

<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

看起来 application.css list 可能没有加载。确保以下内容位于您使用的任何布局中:

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