我正在尝试在我的Rails应用中创建一个讨论工具。我想将用户添加到Facebook Messenger等讨论中。
为此,我实施了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>
答案 0 :(得分:3)
感谢伟大的Algolia支持团队,我设法让它发挥作用!
根据建议,我切换到https://github.com/algolia/autocomplete.js并且它完美无缺。我改变了一些东西,基本上用.autocomplete和事件监听器名称替换.typeahead。
以下是摘录:
$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);
});