javascript - Rails: Algolia 検索のオートコンプリートで結果をクリックする

Question

効率的な Rails アプリを実装するために Algolia をインストールしました。データベースで探しているものを見つけることができるため、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 -->

結果をクリックすると、ユーザーがピン表示ビューにリダイレクトされるようにします。

したがって、このリンクを Hogan リンクにレンダリングする方法がわかりません。たとえば、ピンのアドレスは myapp.com/pins/2 for pin 2 です。

解決策 : リンクを 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>');