Searchkick + Bloodhound + Typeahead для автозаполнения

Я пытаюсь реализовать простую функцию автозаполнения для одного атрибута.

Модель:

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 не отображается ошибка.


person iajnr    schedule 22.02.2015    source источник
comment
попробуйте мое решение, вам нужно вернуть хэш с ключом «значение».   -  person Sharvy Ahmed    schedule 22.02.2015


Ответы (1)


Вам нужно вернуть хеш в ответ на ваше действие автозаполнения:

def autocomplete
  render json: Doctor.search(params[:query], autocomplete: true, limit: 10).map {|doctor| {name: doctor.name, value: doctor.id}}
end
person Sharvy Ahmed    schedule 22.02.2015
comment
Просто скопировал в свой файл Typeahead.css.scss, и это сработало. Спасибо. - person iajnr; 22.02.2015