Typeahead Bloodhound Rails с pg_search

Я использую этот stackoverflow answer, чтобы попытаться реализовать Twitter Typeahead для моего приложения rails и я также попытался внедрить ознакомительный файл Github, но при вводе текста нет подсказок в текстовое поле.

Мой контроллер

class PagesController < ApplicationController
  def typeahead

    @vn = Vn.search_by_name(params[:search])
    render json: @vn.results
  end
end

Мой маршрут

get 'typeahead/:query' => 'pages#typeahead'

Application.js

//= require twitter/typeahead
//= require twitter/typeahead/bloodhound

pages_controller.js в активах/javascripts

var bloodhound = new Bloodhound({
  datumTokenizer: function (d) {
    return Bloodhound.tokenizers.whitespace(d.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,

  // sends ajax request to /typeahead/%QUERY
  // where %QUERY is user input
  remote: '/typeahead/%QUERY', 
  limit: 50
});
bloodhound.initialize();

// initialize typeahead widget and hook it up to bloodhound engine
// #typeahead is just a text input
$('.typeahead').typeahead(null, {
  displayKey: 'name',
  source: bloodhound.ttAdapter()
});

// this is the event that is fired when a user clicks on a suggestion
$('.typeahead').bind('typeahead:selected', function(event, datum, name) {
  doSomething(datum.id);
});

Моя точка зрения

   <%= form_tag(search_path, :method => "get", class: "navbar-form", id: "search-form") do %>
      <%= text_field_tag :search, params[:search], class: "form-control padding-search typeahead", placeholder: "Search" %>   
      <%= button_tag(type: "submit", class: "btn btn-primary padding-search") do %>          
   <% end %>

person Wraithseeker    schedule 02.12.2015    source источник
comment
Вы когда-нибудь догадывались об этом?   -  person user4584963    schedule 09.01.2016
comment
Да, я сделал, я опубликую ответ   -  person Wraithseeker    schedule 09.01.2016


Ответы (1)


Это настройки, которые позволили предложениям Typeahead работать для меня после устранения неполадок в течение некоторого времени.

Кофескрипт

jQuery -> 
  users = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  #local http://localhost:3000/json/vns.json
  remote: {url:'/typeahead/%QUERY'
   , wildcard: '%QUERY'
   }
  })

  users.initialize();
  $('.typeahead').typeahead(null, {
      name: "mysearch"
      source: users.ttAdapter()
  })

Контроллер

    def typeahead    
    @vn = Vn.search_by_name(params[:search])
    @name = @vn.select('name').map(&:name)

    render json: @name
  end
  //Under Routes
  get 'typeahead/:search' => 'pages#typeahead'
  //View
 <%= form_tag(search_path, :method => "get", class: "navbar-form", id: "search-form" ) do %>
              <%= text_field_tag :search, params[:search], class: "form-control typeahead", placeholder: "Search " %>
              <%= button_tag(type: "submit", class: "btn btn-primary padding-search") do %>
                  <i class="fa fa-search 6x"></i>
              <% end %>
 <% end %>
person Wraithseeker    schedule 09.01.2016
comment
Вы знаете, что делает wildcard: '%QUERY'? Я читал API, но все еще не понимаю. - person user4584963; 10.01.2016
comment
Я не слишком уверен, но я получил его с основного сайта. twitter.github.io/typeahead.js/examples - person Wraithseeker; 10.01.2016