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

執筆者:

関連記事

no image

Rails3.2.8でPostgreSQLを使う(開発環境)〜pg gem

環境 Ubuntu server12.04にPostgreSQLをインストールする 参考 #342 Migrating to PostgreSQL @railscasts 目次1 準備2 データベース …

Rails4で複雑な検索〜Ransack

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

no image

Railsで動画ファイルを管理する~CarrierWave Flowplayer

  参考 Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick Rails3で動画配信を試用~flowplayer 環境 Ubuntu …

Rails5でtextareaをコードエディタにする〜Ace Editor

By: Mike Mozart – CC BY 2.0 目次1 Ace Editor2 Gemfile3 application.js4 View5 coffeescript6 できた A …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …