Rails:在Algolia自动完成搜索中单击结果

扎奇

我安装了Algolia,以便为我的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 -->

我希望在单击结果时将用户重定向到图钉显示视图。

所以我不知道如何将此链接呈现到Hogan链接中,因为我的图钉地址例如:myapp.com/pins/2代表图钉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>');
希普

您必须修改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>');

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Rails:在Algolia自动完成搜索中单击结果

来自分类Dev

单击实时搜索结果时如何自动完成输入字段

来自分类Dev

在Rails中在自动完成结果中添加link_to标记

来自分类Dev

单击外部时防止jquery自动完成关闭搜索结果框

来自分类Dev

填写搜索框,然后单击自动完成

来自分类Dev

弹性搜索中的自动完成

来自分类Dev

Algolia : 搜索结果顺序

来自分类Dev

rails 5 algolia 搜索 - 按用户状态过滤结果

来自分类Dev

完整的教程Ruby on Rails自动完成搜索?

来自分类Dev

jQuery自动完成功能不将结果限制为输入控件中的搜索值

来自分类Dev

自动完成地图活动中的搜索位置

来自分类Dev

在 javafx 中创建自动完成搜索表单

来自分类Dev

搜索结果自动完成不显示iOS Objective C

来自分类Dev

jQuery UI自动完成搜索结果不显示

来自分类Dev

搜索结果自动完成不显示iOS Objective C

来自分类Dev

Spotify API-自动完成搜索结果为空

来自分类Dev

自动完成在Vtiger中返回空结果

来自分类Dev

自动完成在laravel中找不到结果

来自分类Dev

结果未显示在自动完成(Angular)中

来自分类Dev

在搜索结果中单击时打开文件

来自分类Dev

如何在ionic 2中完成自动完成(搜索栏)

来自分类Dev

搜索图标未出现在自动完成搜索中

来自分类Dev

Ruby on Rails-简单表单自动完成关联搜索

来自分类Dev

如何在即时搜索页面上的Algolia搜索结果页面中显示HTML内容

来自分类Dev

站点搜索,自动完成

来自分类Dev

搜索自动完成android

来自分类Dev

Rails 4的jQuery自动完成文本无结果

来自分类Dev

Rails中的jQuery UI自动完成链接

来自分类Dev

为 Algolia 搜索结果正确使用 Facet

Related 相关文章

热门标签

归档