Algolia Typeahead检索结果

Céline Martinet Sanchez 发表于 Dev

席琳·马丁内特·桑切斯

我正在尝试在Rails应用程序中创建一个讨论工具。我想将用户添加到类似Facebook Messenger中的讨论中。

为此，我实现了Algolia即时搜索和Typeahead。它可以很好地显示结果，但是当我单击某个结果时，它什么也没做。看来我正在使用的事件无法正常工作。

我无法使用键盘来提高或降低结果，这很奇怪。你可以帮帮我吗？我尝试了Typeahead文档中的所有事件，但是没有人在工作。

太感谢了。

<div class="uk-grid message">
  <div class="uk-width-medium-2-6"></div>
  <div class="uk-width-medium-3-6 bubble">
    <%= form_tag create_discussion_path, method: :post, remote: true, class: 'uk-form', id: 'createDiscussionForm' do %>
        <div class="form-group">
          <div class="uk-grid">
            <div class="uk-width-1-6">
              <span><%= t('to') %></span>
            </div>
            <div class="uk-width-5-6">
              <%= text_field_tag 'recipients', '', class: 'recipients typeahead', id: 'typeahead-algolia-template', spellcheck: false %>
            </div>
          </div>
          <%= text_area_tag 'body', nil, cols: 3, class: 'form-control uk-width-1-1 body', placeholder: 'Ask something or just say hi!', required: true %>
        </div>
        <%= submit_tag t('dashboard.discussions.send_message'), class: 'uk-button uk-width-1-1' %>
    <% end %>
    <div class="arrow-right"></div>
  </div>
  <div class="uk-width-medium-1-6 text-center">
    <%= link_to user_path(current_user) do %>
        <%= image_tag(current_user.pictures.first.image(:square_thumb)) %>
    <% end %>
    <p><%= current_user.first_name %></p>
  </div>
</div>


<!-- Algolia search callback -->
<script type="text/javascript">
  function searchCallback(success, content) {
    if (content.query != $("#typeahead-algolia-template").val()) {
      // do not take out-dated answers into account
      return;
    }

    if (content.hits.length == 0) {
      // no results
      $('#hits').empty();
      return;
    }
  } // end search callback
</script>
<!-- end Algolia search callback -->

<!-- Algolia with typehead and hogan -->
<script type="text/javascript">
  $(document).ready(function() {

    // Algolia initialization
    var $inputfield = $("#typeahead-algolia-template");
    var algolia = algoliasearch('<%= ENV['ALGOLIA_ID'] %>', '<%= ENV['ALGOLIA_PUBLIC_KEY'] %>');
    var index = algolia.initIndex('<%= 'User_' + Rails.env  %>');
    var ttAdapterParams = {
      hitsPerPage: 5,
      facets: '*',
      tagFilters: ''
    };

    // Templating
    var templates = {
      algolia: {
        hit: Hogan.compile(
            '<div class="uk-grid">' +
            '<div class="uk-width-1-4">' +
            '<img src="{{{_highlightResult.picture.value}}}">' +
            '</div>' +
            '<div class="uk-width-3-4">' +
            '<span class="name">' +
            '{{{_highlightResult.first_name.value}}}, ' +
            '</span>' +
            '<span class="occupation">' +
            '{{{_highlightResult.occupation.value}}}' +
            '</span>' +
            '</div>' +
            '</div>'
        )
      }
    };


    // Search?
    $inputfield.typeahead({
          highlight: true,
          hint: true,
          minLength: 1
        },
        {
          source: index.ttAdapter(ttAdapterParams),
          displayKey: 'name',
          templates: {
            suggestion: function(hit) {
              var tpl = templates.algolia.hit.render(hit);
              //console.log(tpl, 'hit');
              return tpl;
            }
          }
        }).on('typeahead:open', function(event, data) {
//          var $form = $(this).closest('form');
//          $form.data('sendToServer', true);
//          $form.submit();
    });
    var val = $inputfield.typeahead('val');
    console.log(val);
    $("#typeahead-algolia-template").bind('typeahead:open', function(ev, suggestion) {
      console.log('Selection: ' + suggestion);
    });
  });
</script>

席琳·马丁内特·桑切斯

多亏了伟大的阿尔及利亚支持团队，我才得以使它成功！

按照建议，我切换到https://github.com/algolia/autocomplete.js，它非常完美。我做了几件事，基本上是将.typeahead替换为.autocomplete和事件侦听器名称。

这是代码段：

$inputfield.autocomplete({
      highlight: true,
      autoselect: true,
      openOnFocus: true
    }, [
      {
        source: $.fn.autocomplete.sources.hits(index, ttAdapterParams),
        displayKey: 'first_name',
        templates: {
          suggestion: function(hit) {
            var tpl = templates.algolia.hit.render(hit);
            //console.log(tpl, 'hit');
            return tpl;
          }
        }
      }]).on('autocomplete:selected', function(event, suggestion, dataset) {
        console.log(suggestion);
});