企業名からすぐにリクナビインターン募集ページ飛べるサービスをつくった。 Simple Rikunavi http://simple-rikunavi.herokuapp.com/
特徴
検索ワードを入力すると随時該当する企業名を提示してくれる。
企業名をクリックすると募集ページに1ステップで飛べる。
実際のリクナビではトップページから検索すると2ステップは最低要する。ひらがな表記とカタカナ表記の両方で検索。
例えば「りくるーと」と入力すると「りくるーと」と「リクルート」に該当する企業が提示されます。ユーザはひらがなをカタカナに直す必要がなくなります。
話題はそれるが、herokuで起動準備がかかる。どうにかならないか調べると、サーバが常に準備している状態に設定できるらしいが、長く使っていると有料になるみたいだ。
以下は、一番頑張ったサジェスト機能の実装について書きたいと思う。
準備
最初、「rails autocomplete」でググったりしたら、rails3-jquery-autocompleteが出てきた。しかしうまく動かなかったので不採用にした。もう一つの方法として,jquery UIのautocompleteがあったのでそちらを採用。
application.js
app/assets/javascripts/application.jsに以下を追加する。
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // the compiled file. // // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD // GO AFTER THE REQUIRES BELOW. // //= require jquery //= require jquery_ujs //= require jquery-ui ←追加!
application.css
jquery uiをダウンロード
http://jqueryui.com/
解凍されたcssフォルダに入った「jquery-ui-1.10.3.custom.css」(現在のバージョン)app/assets/stylesheet/に追加する。
Model作成
以下のようなものをつくる。contentは今回使用しない。
具体的には、
・name=企業名
・url=リンク先URL
となる。
class CreateMembers < ActiveRecord::Migration def change create_table :members do |t| t.string :name t.string :url t.text :content t.timestamps end end end
Controller作成
非同期通信のチェックをする。
if params[:term] #省略 end
ひらがな、カタカナ両方で検索できるようにする。
@hiragana = params[:term].tr("ア-ン","あ-ん") @katakana = params[:term].tr("あ-ん", "ア-ン") @member = Member.where("name LIKE ? OR name LIKE ?","%#{@hiragana}%","%#{@katakana}%")
JSONで結果を返す。
respond_to do |format| format.html format.json{render:json => @member.to_json} end
まとめると次のようになる。
# -*- encoding: utf-8 -*- class MembersController < ApplicationController def index if params[:term] @hiragana = params[:term].tr("ア-ン","あ-ん") @katakana = params[:term].tr("あ-ん", "ア-ン") @member = Member.where("name LIKE ? OR name LIKE ?","%#{@hiragana}%","%#{@katakana}%") else @member = Member.all end respond_to do |format| format.html format.json{render:json => @member.to_json} end end end
View作成
参考ページをもろパクリしてみる。細かいところはなにをやってるのかいまいちわかっていない笑。 参考:How to set-up jquery-ui autocomplete in Rails http://stackoverflow.com/questions/3188157/how-to-set-up-jquery-ui-autocomplete-in-rails
$(function(){ var url = "http://job.rikunabi.com/2015/company/internship/"; $("#textbox1").autocomplete({ source : "<%= members_path(:json) %>", focus:function(event,ui){ $("#textbox1").val(ui.item.name); return false; }, select:function(event,ui){ $("#textbox1").val(ui.item.name); $("#link_origin_id").val(ui.item.id); return false; } }) .data("autocomplete")._renderItem = function(ul,item){ var term = this.term.split(" ").join("|"); var re = new RegExp("(" + term + ")","gi"); var t = item.name.replace(re,"<b>$1</b>");//該当箇所を太字にする return $("<li></li>") .data("item.autocomplete",item) .append("<a href='"+url+item.url+"' target='_blank'>"+t+"</a>") .appendTo(ul); }; });