Enter!バッチを起動しようと勢いよくキーを叩いたら、それはシフトキーだった。itmammothTweet前回はsimple_formを使ったカスタムインプットの作成方法を紹介しました。今回はそのカスタム・インプットとbootstrapの『Typeahead』を組み合わせた便利なインプットを作成したいと思います。Bootstrapが提供するJavascriptのひとつで、オートコンプリート付きのテキストフィールドを簡単に作成することができるjQueryプラグインです。個人的には、BootstrapのJavascriptの中で、一番使える機能だと思っています。bootstrap-rails.gemを導入していれば、この便利な機能があなたのRailsアプリですぐに使用できます。どこに適用するかというと・・・Bookを登録する際に『Author』という項目を入力しますね。同一の著者が複数の本を執筆するのはよくあることです。そこで、データベースに登録されている全ての著者を入力候補としたオートコンプリート機能を実現してみることにします。Typeaheadを適用するではさっそくソースを編集していきましょう。app/views/books/_form.html.erbを修正します。input_htmlオプションを指定しました。『data-provide』に”typeahead”を指定すると自動的にtypeahead機能が付与されます。オートコンプリートの候補は『data-source』に配列形式で指定します。これだけで素敵なオートコンプリート機能が使えるとは便利ですねえ。3行しか書いてなにのに、ここまで辿り着きました。あなおそろしやbootstrap・・・では次に、オートコンプリートの入力候補をちゃんと実装しましょう。データベースから全ての『Author』を取得するようにします。%>pluckメソッドを使い、ユニークなauthor一覧を取得しています。難しい箇所はないと思います。動いてますよ!日本語が問題ないところも素敵です。要件としてはこれで満たしているのですが、前回と同様にこのインプットをカスタム・インプットにして再利用性を高めましょう。他の画面でも著者を入力する場面がきっとあるはずです。ReviewInputと同様に、app/inputs/author_input.rbというファイルを作成して、カスタムインプットを定義します。endendapp/views/books/_form.html.erbも修正して、カスタムインプットを呼び出すようにします。%>画面をリロードして動作を確認してみましょう。先程と同様に正しく動作するはずです。入力候補を取得する正しく動作はしていますが、イケてない箇所がありますね。それは、カスタムインプット内からBookモデルに直接アクセスして入力候補を取得していることです。View層からデータベースをいじり倒すのはよろしくありませんし、もし1画面に複数のAuthorインプットを配置する場合、無駄なデータベースアクセスが増えるのもよくありません。入力候補はコントローラで1回取得するようにしましょう。app/controllers/books_controller.rbを修正しましょう。endend2行目でフィルタを登録しています。set_input_sourcesメソッドです。ApplicationControllerに定義してもよいかもしれません。続いて、author_input.rbを修正します。bootstrapで作る俺流鉄板Railsアプリ』は終了です。大した手間もなく、そこそこリッチなWebアプリケーションが作れることがお分かり頂けたでしょうか。simple_form/bootstrapには、この他にも便利な機能がいろいろとありますので、ぜひとも探訪してみてください。検索:プロフィールitmammothIT界のマンモスを目指しているフリーエンジニアです。麻婆豆腐/Ruby/Kotlin/麻婆春雨/Python好きです。最近カリフラワーも好きになりました。