2017-10-04 83 views
0

我建立了一個簡單的自動完成搜索,並希望能夠點擊在幾乎相同的方式因此我已啓用此使用的搜索結果頁面上時,包括JBuilder中的鏈接<%= link_to pg_search.searchable.title,pg_search.searchable%>。如何使用PG Multisearch填充jQuery的自動完成

正如您在下面看到的,如果搜索項已經提交,我可以在索引頁面上添加每個搜索結果的鏈接,但是我希望允許選項直接從jQuery中點擊每個項目自動完成結果。

我試圖item.id如下JS標記的href和我只能得到的鏈接/ ID,而不是/類名/ ID。我嘗試item.path,然後添加到「路徑」jbuilder json數組,我得到/ [對象對象]。我怎麼才能在那裏獲得到對象本身的實際鏈接?

的Rails 5.1.2,紅寶石2.4.1

pg_search_documents.js

var app = window.app = {}; 

app.pg_search_documents = function() { 
    this._input = $('#term'); 
    this._initAutocomplete(); 
}; 

app.pg_search_documents.prototype = { 
    _initAutocomplete: function() { 
    this._input 
     .autocomplete({ 
     source: '/lists', 
     appendTo: '#search-results', 
     select: $.proxy(this._select, this) 
     }) 
     .autocomplete('instance')._renderItem = $.proxy(this._render, this); 
    }, 

    _render: function(ul, item) { 
    var markup = [ 
     '<span class="title"><a href="' + item.url + '">' + item.title + '</a></span>', 
    ]; 
    return $('<li>') 
     .append(markup.join('')) 
     .appendTo(ul); 
    }, 

    _select: function(e, ui) { 
    this._input.val(ui.item.title); 
    return false; 
    } 
    }; 

解釋控制器

def index 


respond_to do |format| 
format.html 
format.json { @pg_search_documents = PgSearch.multisearch(params[:term]) } 
    end 

if params[:term] 

    @pg_search_documents = PgSearch.multisearch(params[:term]) 
else 
    @lists = List.all 
end 
end 

解釋index.json.jbuilder

json.array!(@pg_search_documents) do |pg_search| 
    json.id   pg_search.searchable.id 
    json.title  pg_search.searchable.title 
    json.path   pg_search.searchable 

end 

列表index.html.erb

<script> 
     $(function() { 
      new app.pg_search_documents; 
     }); 
     </script> 
     <p id="notice"><%= notice %></p> 

     <h1>Lists</h1> 

     <%= form_tag lists_path, method: :get do %> 
     <%= label_tag 'List' %> <%= text_field_tag 'term', params[:term], autofocus: true %> 
     <%= submit_tag 'Search!' %> 
     <% end %> 
     <div class="results" id="search-results"></div> 

     <% if params[:term] %> 
      <% if @pg_search_documents.present? %> 

      <% @pg_search_documents.each do |pg_search| %> 
       <% if pg_search.searchable.respond_to?(:title) %> 
       <%= link_to pg_search.searchable.title, pg_search.searchable %> 
       <% else %> 
       <%= pg_search.searchable.url %> 
       <% end %> 
      <% end %> 
      <% else %> 

      There is no match! Create this list yourself <%= link_to 'New List', new_list_path %> 

      <% end %> 

     <% else %> 

     <%= render @lists %> 
     <% end %> 

     <br> 

     <%= link_to 'New List', new_list_path %> 

回答

1

隨着你也可以使用Rails視圖助手的JBuilder JSON意見。

json.array!(@pg_search_documents) do |pg_search| 
    json.id   pg_search.searchable.id 
    json.title  pg_search.searchable.title 
    json.url   url_for(pg_search.searchable, format: :json) 
end 
+0

這個工作沒有添加'format :: json'(接收到它的錯誤)。還會更新我的代碼以反映我在pg_search_documents.js中所做的更改以顯示網址。謝謝丹尼爾! – dstep

相關問題