not good but great

プログラミング、アート、映画・本の感想について書きます。

Railsでjquery-ui autocompleteを使用する

f:id:naoyashiga:20130708013659p:plain

企業名からすぐにリクナビインターン募集ページ飛べるサービスをつくった。 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);
    };
  });