Rails中的jQuery UI自動完成鏈接

我在我的Rails應用程序中實現了jQuery-ui自動完成，它工作正常，但我還希望結果成爲產品鏈接（例如產品/ 1）。任何想法我怎麼能做到這一點？Rails中的jQuery UI自動完成鏈接

jQuery代碼中的CoffeeScript：

$(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。（你可以忽略它只是一個想法。）問題是，我不知道如何做到這一點。

來源

2015-11-13 Gregory_ynwa

你們是不是要在回信哈希的聯繫？ –

@ brent-eicher不，我試圖從js文件中獲取鏈接。響應哈希是這樣的'''[\「Alivia Gulgowski \」，\「安德魯啤酒\」，'' –

最後我找到了解決辦法。我張貼它以防將來有人需要這樣的事情。

首先在 '配置/初始化/ 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

來源

2015-11-14 21:13:52

Rails中的jQuery UI自動完成鏈接

回答

相關問題