2014-11-02 77 views
1

我安裝了Algolia來實現我的Rails應用程序的高效: algolia搜索欄配置良好,因爲我可以在我的db中找到我正在尋找的內容。 用戶可以使用帶有自動完成功能的搜索欄在欄中找到針腳。Rails:點擊Algolia搜索自動完成的結果

但我想讓他們對結果進行引腳頁。

<!-- algolia search --> 


<input class="typeahead" type="text" placeholder="Search for users by name..." id="user-search" spellcheck="false" /> 

<!-- JQuery --> 
<script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script> 
<!-- Typahead.js is used to display the auto-completion menu --> 
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script> 
<!-- Hogan.js is used to render the hits using Mustache.js templating --> 
<script src="//cdn.jsdelivr.net/hogan.js/3.0.0/hogan.common.js"></script> 
<!-- Algolia --> 
<script src="//cdn.jsdelivr.net/algoliasearch/latest/algoliasearch.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    // Replace the following values by your ApplicationID and ApiKey. 
    var algolia = new AlgoliaSearch('MYAPPID', 'MYAPPPW'); 
    // replace YourIndexName by the name of the index you want to query. 
    var index = algolia.initIndex('Pin'); 

    // Mustache templating by Hogan.js (http://mustache.github.io/) 
    var template = Hogan.compile('<div class="hit">' + 
     '<div class="name">' + 
     '{{{ _highlightResult.description.value }}} ' + 
     '({{{ _highlightResult.details.value }}})' + 
     '</div>' + 
     '</div>'); 

    // typeahead.js initialization 
    $('#user-search').typeahead(null, { 
     source: index.ttAdapter({ hitsPerPage: 5 }), 
     displayKey: 'email', 
     templates: { 
     suggestion: function(hit) { 
      // select matching attributes only 
      hit.matchingAttributes = []; 
      for (var attribute in hit._highlightResult) { 
      if (attribute === 'name' || attribute == 'company') { 
       // already handled by the template 
       continue; 
      } 
      // all others attributes that are matching should be added in the matchingAttributes array 
      // so we can display them in the dropdown menu. Non-matching attributes are skipped. 
      if (hit._highlightResult[attribute].matchLevel !== 'none') { 
       hit.matchingAttributes.push({ attribute: attribute, value: hit._highlightResult[attribute].value }); 
      } 
      } 

      // render the hit using Hogan.js 
      return template.render(hit); 
     } 
     } 
    }); 
    }); 
</script> 


<!-- /algolia search --> 

我希望用戶在點擊結果時被重定向到pin顯示視圖。

所以我不知道如何渲染此鏈接到霍根鏈接作爲ADRESS我的腳是例如:myapp.com/pins/2對銷2

SOLUTION: 添加鏈接到hoogan模板,其中slug是我用friendly_id gem修改的URL。

// Mustache templating by Hogan.js (http://mustache.github.io/) 
var template = Hogan.compile('<div class="hit">' + 
'<a href="http://myapp.com/pins/{{{slug}}}" class="name">' + 
    '{{{ _highlightResult.description.value }}} ' + 
    '({{{ _highlightResult.details.value }}})' + 
    '</a>' + 
    '</div>'); 

回答

1

您必須修改hoogan模板添加一個鏈接,下面是一個使用LinkedIn鏈接http://jsfiddle.net/bxvnqtan/

// Mustache templating by Hogan.js (http://mustache.github.io/) 
var template = Hogan.compile('<div class="hit">' + 
'<a href="{{{linkedin}}}" class="name">' + 
    '{{{ _highlightResult.description.value }}} ' + 
    '({{{ _highlightResult.details.value }}})' + 
    '</a>' + 
    '</div>'); 
+0

嘿感謝@Shipow一個例子 - 但是,我如何能重定向到的相關放映視圖針?我會用更多的信息編輯我的問題。謝謝btw。 – zacchj 2014-11-03 17:04:10

+0

剛剛使用的解決方案:''我用解決方案更新了答案。 – zacchj 2014-11-03 20:00:16