2

Semantic-UI の検索モジュールを使用した例はありますか?

問題は、ドキュメントがあることを示しており、ここにモジュールがあります

HTML:

<form action="/web/quickSearch" class="ui search" method="GET">
<div class="ui input">
    <input type="text" placeholder="Search..." autocomplete="off" name="query" class="prompt">
</div>
<div class="results"></div>
<div class="ui green button" style="padding:0.8em 1.5em;margin-top:-1px;margin-left:-25px;float:none;">Search</div>

私はそれを非常に簡単に呼んでいます：

$(".ui.search").search("/web/quickSearch");

実際にはGETを呼び出しますが、クエリをまったく追加しません.apiで「urlData」の一部として表示されますが、これを適切に配線するには他に何を追加する必要がありますか?

何か案は？

4

2 に答える 2

4

私も Semantic-UI の検索 API に問題がありました。

したがって、いくつかの調査の後、次のように使用できることがわかりました。

Ruby on Rails も使用しています。

都市名をオートコンプリートする jQuery ファイル:

# Semantic-Ui Search
# Sets for autocomplete name of cities while typing.
$('.ui.search.city').search
  apiSettings: 
    action: 'search', url: '/cities/autocomplete.json?query={query}'
  fields:
    results : 'cities'
    title   : 'name'
    description   : 'state'
  minCharacters : 3

Semantic-UI (検索) は、タイトルと説明、および API が指定するその他の子コンテンツを含むルートおよびノー​​ドとして「結果」を期待します。したがって、json の結果が他の名前である場合は、search 関数のメソッド呼び出しを変更する必要があります。

resultsこのため、 for cities、titlefor name、およびdescriptionに変更しましたstate。

私のコントローラーでは、次のようなクエリを作成しました。

def autocomplete    
  @cities = City.includes(:state).order(:name).where('name like ?', "%#{params[:query]}%")
end

Routes ファイルで、コレクションを返す get メソッドを指定します。

# Resources for cities.
resources :cities, only: :index do
  get :autocomplete, :on => :collection
end

そして、Rablgem を使用して、json ファイルの出力をフォーマットします。

collection @cities, root: :cities , object_root: false

attributes :id, :name
node(:state) { |city| city.state.name }
node(:query) { params[:query] }

それだけです、それは私にとってはうまくいきます。

于 2015-10-04T19:01:29.490 に答える
2

最新バージョンの search.js と api.js を使用することをお勧めします

https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/behaviors/api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src /definitions/modules/search.js

API を使用すると、URL テンプレートを使用してエンドポイントを作成できます。これにより、API を 1 か所で指定し、実行時に URL 変数を置き換えることができます。

たとえば、最近のプロジェクトでは、このような API マップを使用しました

  $.api.settings.api = {
    emailArticle     : '/api/article/ajax/{id}',
    getArticles      : '/api/article/{type}/{date}/{limit}/{/page}/{/filter}/',
    homepageArticles : '/api/featured/{homepageID}/{lastID}',
    latestArticles   : '/api/next/{offset}',
    search           : '/api/search/{query}'
  }

URL テンプレートは、URL の可変部分の文字列テンプレートを使用して機能します。

  • {$variable} または {variable} を使用して必要なパラメータを指定できます。
  • オプションのパラメーターは、{/$variable} または {/variable} で指定できます。

必要な変数が実行時に含まれていない場合、エラーが返されます。オプションの変数は、指定されていない場合、URL からそれ自体 (および末尾のスラッシュ) を自動的に削除します。

APIには、検索以外にも多くの用途があり、最小リクエスト時間の設定、要素へのロード状態の添付、htmlメタデータのパラメーターとしての受け渡しの許可などがありますが、これらは質問の範囲外です。

検索コンポーネントを使用。何も指定されていない場合、デフォルトで search API アクションが使用されます。

このアクションには{$query}、クエリ パラメータをマップする場所を含める URL が必要です。

あなたの例では、デフォルトの検索エンドポイントをグローバルに設定できます。

たとえば、GET で渡す場合は、次のように使用できます。

$.api.settings.api.search = 'search/?q={$query}'

または、モジュールのカスタム API 設定を指定できます $('.ui.search').search({ apiSettings: { url: '/search/{$query}' } });

于 2014-05-06T17:57:22.410 に答える