0

jQuery ui のオートコンプリートを実装しようとしています。CSSが適用されていないことを除いて、機能しています。
1) 表示される大学のリストは、通常の ul のようなスタイルです。
2) 「11 件の結果が利用可能です。移動するには上下の矢印キーを使用してください」と表示されますが、表示したくありません。

それをライブで見るために私のウェブサイトを見てください。

ここのデフォルト機能のようにしたい。

ここのアドバイスに従ってjQuery uiをインストールし、ここでテーマをインストールしました。

これが私のコードです。スタイルをデフォルトの機能例のようにするにはどうすればよいですか?

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 テーマを適切にインストールしましたか?

  • 私はこれを使いました。
  • を実行する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 .
  • 「ヘルパー」と「Rake タスク」に戸惑いました。それらは私には当てはまらないようです。

更新 - 開発環境

<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>
4

1 に答える 1

1

application.cssマニフェストが読み込まれていない可能性があります。使用しているレイアウトに次のものが含まれていることを確認してください。

<%= stylesheet_link_tag "application", media: "all" %>
于 2013-08-31T16:16:41.067 に答える