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时，这一切都显示出来：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有*= require jquery.ui.all *= require jquery-ui/smoothness *= require_self *= require_tree .
我对“助手”和“耙子任务”感到困惑。它们似乎不适合我。

更新 - 开发环境

<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清单可能无法加载。确保以下是您正在使用的任何布局：

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

没有应用jquery ui自动完成的CSS

1 个答案: