Я пытаюсь реализовать простую функцию автозаполнения для одного атрибута.
Модель:
searchkick text_start: [:name],autocomplete: ['name']
После переиндексации поведение в консоли Rails нормальное.
2.2.0-p0 :002 >Doctor.search("a", autocomplete: true).map(&:name)
gives the output-
=> ["a", "aa", "aaa", "aaaa"]
После этого я добавил действие Autocomplete в контроллер и новый маршрут в файл route.rb.
Контроллер:
def autocomplete
console.log("In auto")
render json: Doctor.search(params[:query], autocomplete: false, limit: 10).map(&:name)
end
Маршруты:
resources :doctors do
collection do
get :autocomplete
end
end
В этот момент, если я просто проверю следующий URL:
http://localhost:3000/doctors/autocomplete?query="a"
Затем я получаю ожидаемый результат в браузере:
["a", "aa", "aaa", "aaaa"]
Теперь добавляем окно поиска.
_header.html.erb:
<%= form_tag doctors_path, method: :get do %>
<div class="form-group">
<%= text_field_tag :query, params[:query], class: 'form-control typeahead', autocomplete: "off" %>
<%= submit_tag 'Search', class: 'btn btn-primary' %>
</div>
<% end %>
И, наконец, Javascript:
var ready;
ready = function() {
var numbers = new Bloodhound({
remote: {url: "/doctors/autocomplete?query=%QUERY"},
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace
});
// initialize the bloodhound suggestion engine
var promise = numbers.initialize();
promise
.done(function() { console.log('success!'); })
.fail(function() { console.log('err!'); });
// instantiate the typeahead UI
$( '.typeahead').typeahead(null, {
displayKey: 'name',
source: numbers.ttAdapter()
});
}
$(document).ready(ready);
$(document).on('page:load', ready);
И это используемый тег script:
<script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
Поле поиска не показывает ответа при вводе чего-либо, а также в консоли Google Chrome не отображается ошибка.