自动完成功能似乎无法在rails上使用ruby

时间:2014-05-24 16:49:14

标签: javascript ruby-on-rails ruby-on-rails-3 ruby-on-rails-4 autocomplete

我正在尝试在文本字段上实现自动填充以进行搜索,该搜索在我的视图文件index.html.erb中包含以下代码

<%= form_tag search_path, method: :get do %>
<p>
<%= text_field_tag :query, params[:query], :id => 'autocomplete'  %>
<%= submit_tag "Search", name: nil %>
</p>
<% end %>

我在模型中包含了以下方法

def self.query_matches(term) 
tire.search do
    query {string "query:#{term}"}  
end
end

和控制器如下

def autocomplete
results = Univ.query_matches(params[:term]) 
render :json => results, :callback => params[:callback] 
end

我在js文件夹中的application.js文件中包含了jQuery-ui。但是,我没有看到自动完成功能在我的视图中运行。

我正在使用的jQuery如下

jQuery ->
$("#autocomplete").autocomplete ({
source: function(request,response) {
jQuery.ajax({
url: "http://localhost:3000/univ/autocomplete.json",
dataType: "jsonp",
data: {
    term: request.term
},
success: function(data){
var rows: [];
for( var i = 0; i< data.length; i++){
    rows.push({data[i].query,value:data[i].query});
}
response(rows);
}
});
}
});

有人可以提出我可能出错的地方吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

在index.html.erb

<%= form_tag search_path, method: :get do %>
 <p>
  <%= text_field_tag :query, params[:query], :id => 'autocomplete', data: {autocomplete_source: univ_autocomplete_url}  %>
  <%= submit_tag "Search", name: nil %>
 </p>
<% end %>

在univ_controller中:

def autocomplete
 results = Univ.where("field_name LIKE ?", "#{params[:term]}%")
 render json: results.map(&:field_name)
end

在application.js中: -

$(document).ready(function() {
 $( "#autocomplete" ).autocomplete({
    source: $( "#autocomplete" ).data('autocomplete-source')
 });
});

如果在表单中键入两个字符时搜索字段,则应将其写为或根据需要进行更改: -

$(document).ready(function() {
 $( "#autocomplete" ).autocomplete({
    minLength: 2,
    source: $( "#autocomplete" ).data('autocomplete-source')
 });
});

添加routes.rb: -

get "univ/autocomplete"

注意: - 应该有一个名为 univ 的控制器或在控制器中添加自动完成方法并检查路由。然后使用数据中的新路线更改路径 univ_autocomplete_url :{autocomplete_source:univ_autocomplete_url}

如果在其他控制器中添加自动填充方法,则将 routes.rb 更改为: -

get "controller_name/autocomplete"