我已经在我的Rails应用程序中实现了jQuery-ui自动完成功能,并且效果很好,但是我也希望结果是指向产品的链接(例如products / 1)。知道我该怎么做吗?
coffeescript中的jQuery代码:
$(document).on "page:change", ->
$(".header-search-input").autocomplete(
minLength: 2,
source: $(".header-search-input").data('autocomplete-source')
select: (event, ui) ->
$(".header-search-input").val ui.item.label
).autocomplete('instance')._renderItem = (ul, item) ->
result = item.label.replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + $.ui.autocomplete.escapeRegex(@term) + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<strong>$1</strong>')
$('<li>').append('<a>' + result + '</a>').appendTo ul
return
看法:
<ul class="nav navbar-nav navbar-left" id="header-search">
<%= form_tag search_path, class: "navbar-form navbar-left list-inline", method: :get do |f| %>
<li class="form-group">
<%= text_field_tag :q, params[:q], class: "form-control margdown header-search-input", placeholder: "Search", data: { autocomplete_source: products_path(:json) } %>
</li>
<li><%= submit_tag "Submit", class: "btn btn-info shake", name: nil %></li>
<% end %>
</ul>
控制器:
def index
if params[:term]
@products = Product.order(:name).where(Product.arel_table[:name].matches("%#{params[:term]}%"))
response = (Hash[@products.map { |u| [u.name, u.id] }])
else
@products = Product.all.where.not(quantity: 0).order(created_at: :desc).paginate(page: params[:page], per_page: 9)
end
respond_to do |format|
format.html
format.json { render json: response.keys }
end
end
我已经创建了一个散列,如在控制器上看到的那样,具有成对的名称和ID,以获取视图中相应产品名称的ID。(您可以忽略它只是一个想法。)问题是我不知道该怎么做。
终于我找到了解决方案。我张贴它以防将来有人需要这样的东西。
首先在“ config / initializers / wrap_parameters.rb”中,我取消注释以下内容:
ActiveSupport.on_load(:active_record) do
self.include_root_in_json = true
end
您可以在这里和这里阅读有关此内容的更多信息。现在,来自控制器的json响应将采用以下格式:
"[{\"product\":{\"id\":20,\"name\":\"Andrew Beer\"}},{\"product\...]"
控制器:
def index
if params[:term]
@products = Product.order(:name).where(Product.arel_table[:name].matches("%#{params[:term]}%"))
else
@products = Product.all.where.not(quantity: 0).order(created_at: :desc).paginate(page: params[:page], per_page: 9)
end
respond_to do |format|
format.html
format.json { render json: @products, only: [:id, :name] }
end
end
现在我们可以在我们的js文件中访问两个参数(id和name)。
jQuery的:
$(document).on "page:change", ->
$(".header-search-input").autocomplete(
minLength: 2,
source: $(".header-search-input").data('autocomplete-source')
select: (event, ui) ->
$(".header-search-input").val ui.item.product.name
$("a").attr("href", "/products/"+ ui.item.product.id)
).autocomplete('instance')._renderItem = (ul, item) ->
result = item.product.name.replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + $.ui.autocomplete.escapeRegex(@term) + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<strong>$1</strong>')
$('<li>').append('<a>' + result + '</a>').appendTo ul
return
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句