2015-11-13 3 views
1

У меня есть реализация jQuery-ui autocomplete в моем приложении Rails, и она отлично работает, но я хочу, чтобы результаты были ссылками на продукты (например, продукты/1). Любая идея, как я могу это сделать?jQuery UI autocomplete links in Rails

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 

I создайте хэш, как вы можете видеть на контроллере, с парами имен и идентификаторов, чтобы получить идентификатор соответствующего имени продукта в представлении. (Вы можете игнорировать это просто мысль.) Проблема в том, что я не знаю, как это сделать.

+0

Вы пытаетесь включить ссылку в хэш ответа? –

+0

@ brent-eicher no Я пытаюсь получить ссылку из js-файла. хеш ответа - это что-то вроде этого »[« Аливия Гульговски »,« Эндрю Пир », ..' –

ответ

0

Наконец-то я нашел решение. Я отправляю его, если кто-то в будущем нуждается в чем-то подобном.

Во-первых, в 'конфигурации/инициализаторах/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 

и теперь мы можем получить доступ к обоим параметрам (ID и имя) в нашем файле JS ,

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