jQuery Railsで使えるGem

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

投稿日:

railscasts.com/episodes/258-token-fields?language=ja&view=asciicast

stackoverflow.com/questions/6674127/how-to-use-jquery-tokeninput-and-acts-as-taggable-on

acts-as-taggable-on

github.com/mbleigh/acts-as-taggable-on

Gemfile

bundle

generate

 

 

 設定

Model

順位つきのタグの場合

 使い方

1つのモデルについたタグリスト

登録はカンマ区切りのStringsで

RABLで出した例

 

詳細なタグリストを一括で ハッシュのリストで取れる

 

そして、今回つかう検索して絞込みしたタグリスト

うん、無理してacts-as-taggable-onをつかう必要もなかったかも

 

タグから検索する

タグは配列で渡す and かorかはオプションで指定する

  • match_all はand ->じゃなかった リストにあるタグに過不足なく一致しているかどうかだった https://github.com/mbleigh/acts-as-taggable-on/issues/87
  • any はor
  • excludeはnot

ただ、使えないのが、タグ配列に空を渡した場合、Allじゃなくて[]空が返ってくる仕様

こんな感じでModelでメソッドを作って空の場合はscopedを渡すようにした

 

*selfを返すと、Recipe.where().any_tagged_with().order()みたいな場合、Recipe.any_tagged_withって意味になって、whereが効かなくなる.ここはscopedを返す.

ソースを見てたらここぽいのでメモ

empty_result = scopedでconditions => falseにしてる

これをどうにかすれば全結果が返ってくるはず(未検証)

 

Acts_as_taggable_onのスキーマ

 

 

jQuery.tokenInput

loopj.com/jquery-tokeninput/

html

テキストフィールドで

 jQuery

引数は、params[:q]に対して、[{id: XXX, name: XXX}, …の形でJSONを返してくれるアドレス

controller

それをこれからつくる(といってもほぼ参照先のまま)

うえに書いたとおりjQuery.tokenInputで必要なJSONはid: とname:

これを取得すると選択肢にnameが現れて、隠されているもともとのテキストフィールドにidがカンマ区切りで自動的に挿入される仕組み

screenshot

この動きは次のようなコールバックを監視するとわかる

POST

そのまま、テキストフィールドに渡されたカンマ区切りのこのリストをtags_list(ここではarchitecture_list)としてPOSTすればtags_listが登録できる

backboneを使っているのでこんな感じで

prePopulate

更新は同じくPUTすればいいけど、もともとあるタグリストを表示させる必要がある

prePopulateをつかう

idとnameの仕組みは前と同じ

 tokenInputで新しいタグを登録できるようにする

これはRailsCastsのハック

検索結果が0の場合は検索語をそのままJSONとして返すようにしてやれば、nameの欄が選択肢に表示されて、それを選べば、idがテキストフィールドにそのまま並ぶという仕組み

-jQuery, Railsで使えるGem
-, ,

執筆者:

関連記事

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

Rails3で帳票印刷を試す~thinreports

By: ZZ Bottom – CC BY 2.0 目次1 Thinreports2 とりあえずサンプルを試してみた3 ソースを見てみる1~詳細画面4 ソースを見てみる2~一覧表 Thin …

Rails4で複雑な検索〜Ransack

By: eric molina – CC BY 2.0 株価データをつかって複雑な絞り込み検索ができるようにしてみた データは、こちらのサンプルを使わせていただいた datawarehou …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

今度こそRails3.2からdocxを生成する

目次1 前提2 構想3 アップロード4 スキームの保存5 docxの生成6 レイアウトと画面遷移を考える7 データの更新8 データの削除 前提 Rubyからdocxを生成する 前回、イキオイアマって自 …