安装

#gem安装
gem 'jquery-ui-rails'

#application.js
//= require jquery-ui/core
//= require jquery-ui/widget
//= require jquery-ui/position
//= require jquery-ui/widgets/autocomplete
//= require jquery-ui/widgets/menu

$(document).on('turbolinks:load', function() {
    $('#term').autocomplete({
        source: "/contacts/autocomplete",
        minLength: 3,
        select: function (event, ui) {
            $('#term').val(ui.item.value);
            $(this).closest('form').submit();
        }
    });
})

#application.scss
/*
 *= require jquery-ui/autocomplete
 *= require jquery-ui/menu
*/

//设置下拉框内容和长度
.ui-autocomplete {
    position: relative;
    cursor: default;
    z-index: 9999 !important;
    width: 196px;
}

.ui-helper-hidden-accessible { display:none; }  //去除提示内容

代码设置

#contact_controllers.rb
def autocomplete
  #不管设置其他任何参数，这里的params永远是term,即是params[:term]
  @contacts = Contact.search(params[:term]).order("created_at desc").page(params[:page])
end

#autocomplete.json.jbuilder
json.array!(@contacts) do |contact|
  json.id contact.id
  json.value contact.name
end