Algolia Typeahead получить результаты

Question

Я пытаюсь создать инструмент обсуждения в моем приложении Rails. Я хотел бы добавить пользователей к обсуждению, как в Facebook-мессенджере.

Для этого я внедрил Algolia мгновенный поиск sith 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> 

Answer 1

Благодаря отличной команде поддержки Algolia мне удалось заставить ее работать!

Как и было предложено, я переключился на 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); 
});