RubyonRails-简单表单自动完成关联搜索

Question

我在一个基本任务管理应用程序中有一个表单，它允许将任务分配给用户(task belongs_to user)。我使用的是简单表单。

目前，关联是以典型的方式填充的，其中有一个用户下拉列表，例如：<%= f.association :user, label_method: :name, value_method: :id, include_blank: false %>。

然而，随着用户数量的增长，我希望将其更改为自动完成表单字段以查找用户。我已经尝试过遵循Railscast的主题，尽管它不使用SimpleForm，也不在我的实现中工作。

这是我的表格、型号和咖啡代码：

表单

<%= simple_form_for @task do |f| %>
...
<%= f.input :user_name, as: :search, data: 
{autocomplete_source: User.pluck(:name)} %>
...
<%= f.button :submit %>
<% end %>

型号

# Virtual attribute for autocomplete form field
def user_name
user.try(:name)
end
def user_name=(name)
self.user = User.find_by_name(name) if name.present?
end

任务。咖啡

jQuery ->
$('#task_user_name').autocomplete
source: $('#task_user_name').data('autocomplete-source')

这会生成以下HTML:

<input class="string search optional form-control 
ui-autocomplete-input ui-autocomplete-loading" type="search" 
value="Robert Strong" name="task[user_name]" id="task_user_name" 
autocomplete="off">

尽管在开发工具控制台中出现以下错误：

Uncaught TypeError: this.source is not a function

关心HTML中的autocomplete="off"，无法想象TypeError有多大帮助！

我被难住了，所以如果能给我任何建议，我将不胜感激！提前谢谢，让我知道你的想法，史蒂夫。

Answer 1

autocomplete_source需要一个数组或URL，当调用该数组或URL时，它将返回具有与查询匹配的结果的JSON。http://api.jqueryui.com/autocomplete/#option-源

现在你有

<%= f.input :user_name, as: :search, data: 
{autocomplete_source: User.pluck(:name)} %>

这可能会为javascript返回一个字符串。所以你可以把它改成：

<%= f.input :user_name, as: :search, data: 
{autocomplete_source: User.pluck(:name).to_json} %>

然后在设置自动完成时解析JSON：

jQuery ->
$('#task_user_name').autocomplete
source: JSON.parse($('#task_user_name').data('autocomplete-source'))

但从长远来看(当你有很多用户时)，这将显著影响页面的加载时间。你真的应该遵循railscast，并放置一个URL作为自动完成源：

<%= f.input :user_name, as: :search, data: 
{autocomplete_source: users_path} %>

确保将json呈现路径添加到用户控制器上的索引操作中。

如果你的索引操作也用于其他事情，你可以使用respond_to:

# users_controller
def index
@users = User.order(:name)
@users = @users.where("name like ?", "%#{params[:term]}%") if params[:term]
respond_to do |format|
format.html  # index.html.erb
format.json  { render :json => @users.map(&:name) }
end
end

Answer 2

除了奥利弗的回答，我还必须：

<%= f.input :user_name, as: :search, input_html: {class: 'ui-autocomplete-input', data: {autocomplete_source: users_path} }%>

使其与Simple_Form一起工作。