安装
#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