Rails 中的 jQuery UI 自动完成链接答案

【问题标题】：jQuery UI autocomplete links in RailsRails 中的 jQuery UI 自动完成链接
【发布时间】：2015-11-13 19:02:00
【问题描述】：

我在我的 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。（你可以忽略它只是一个想法。）问题是我不知道该怎么做。

【问题讨论】：

您是否尝试在响应哈希中包含该链接？
@brent-eicher 不，我正在尝试从 js 文件中获取链接。响应哈希是这样的 "[\"Alivia Gulgowski\",\"Andrew Beer\",..

标签： jquery ruby-on-rails jquery-ui jquery-ui-autocomplete

【解决方案1】：

终于找到了解决办法。我发布它以防将来有人需要这样的东西。

首先在 'config/initializers/wrap_parameters.rb' 中，我取消注释以下内容：

ActiveSupport.on_load(:active_record) do
 self.include_root_in_json = true
end

您可以阅读更多关于此here 和here 的信息。现在来自控制器的 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

【讨论】：