트위터 타입어헤드 셋업
vi Gemfile

# Gemfile
source 'https://rails-assets.org' do
  gem 'rails-assets-typeahead.js'
end
vi application.js

//= require typeahead.js
타입어헤드 사용
vi index.html

<div id="appellation" class="">
  <input type="text" class="form-control typeahead" placeholder="Appellation or Region">
</div>
vi appellation.coffee

appellations = new Bloodhound(
  # datumTokenizer: Bloodhound.tokenizers.whitespace
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name')
  queryTokenizer: Bloodhound.tokenizers.whitespace
  remote:
    url: '/appellation.json?q=%QUERY'
    wildcard: '%QUERY'
)

$('#appellation .typeahead').typeahead(
  {
    hint: true
    highlight: true
    minLength: 1
  },
  {
    name: 'appellations'
    display: 'name'
    source: appellations
    limit: 25
    templates:
      empty: [
        "<div class='empty-message'>Not in the List</div>"
      ].join("\n")
      suggestion: (data) ->
        "<div>#{data.name}<br><small class=''><i>#{data.region}</i></small></div>"
  }
)
typeahead()의 limit 옵션 n에 대해서 서버의 Appleation.where().limit(m)의 m은 최소 n+1 이어야 한다.
스타일링
vi _typeahead.scss

@mixin typeahead-form-control($border-color: #ccc)  {
  border-color: $border-color;
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  &:focus {
    border-color: darken($border-color, 10%);
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%))
  }
}

.twitter-typeahead {
  width: 100%;
  float: left;

  .input-group & {
    display: table-cell !important;
  }

  .tt-hint {
    color: #999999; // $text-muted;
  }

  .tt-input {
    z-index: 2;
    //disabled status
    //overwrite inline styles of .tt-query
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
      cursor: not-allowed;
      //overwirte inline style
      background-color: #eeeeee !important !important;
    }
  }
}

.tt-dropdown-menu, .tt-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000; // @zindex-dropdown;
  min-width: 160px;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px; // @font-size-base;
  background-color: #fff; // @dropdown-bg;
  border: 1px solid #ccc; // @dropdown-fallback-border;
  border: 1px solid rgba(0, 0, 0, 0.15); // @dropdown-border;
  @include border-radius(4px); // @border-radius-base;
  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;

  .tt-suggestion {
    //item
    display: block;
    padding: 3px 12px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143; // @line-height-base;
    color: #333333; // @dropdown-link-color;

    &.tt-cursor, &:hover {
      //item selected
      cursor: pointer;
      text-decoration: none;
      outline: 0;
      background-color: #f5f5f5; // @dropdown-link-hover-bg;
      color: #262626; // @dropdown-link-hover-color;
      a {
        //link in item selected
        color: #262626; // @dropdown-link-hover-color;
      }
    }
    p {
      margin: 0;
    }
  }
}

.tt-input,
.tt-hint {
  .twitter-typeahead &{
    //validation states
    .has-warning &{
      @include typeahead-form-control(#8a6d3b); // @state-warning-text
    }
    .has-error &{
      @include typeahead-form-control(#a94442); // @state-danger-text
    }
    .has-success &{
      @include typeahead-form-control(#3c763d); // @state-success-text
    }
  }

  //border
  .input-group .twitter-typeahead:first-child & {
    @include border-left-radius(4px); // @border-radius-base
    width: 100%;
  }
  .input-group .twitter-typeahead:last-child & {
    @include border-right-radius(4px); // @border-radius-base
    width: 100%;
  }

  //sizing - small:size and border
  .input-group.input-group-sm .twitter-typeahead &{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    @include border-radius(3px);
  }
  .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) &{
    @include border-radius(0);
  }
  .input-group.input-group-sm .twitter-typeahead:first-child &{
    @include border-left-radius(3px);
    @include border-right-radius(0);
  }
  .input-group.input-group-sm .twitter-typeahead:last-child &{
    @include border-left-radius(0);
    @include border-right-radius(3px);
  }

  //sizing - large:size and border
  .input-group.input-group-lg .twitter-typeahead &{
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    @include border-radius(6px);
  }
  .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) &{
    @include border-radius(0);
  }
  .input-group.input-group-lg .twitter-typeahead:first-child &{
    @include border-left-radius(6px);
    @include border-right-radius(0);
  }
  .input-group.input-group-lg .twitter-typeahead:last-child &{
    @include border-left-radius(0);
    @include border-right-radius(6px);
  }
}