Рабочий пример twitter-typeahead?

Question

Я пытаюсь установить жемчужину twitter-typeahead-rails в свое приложение. Я следил за несколькими различными учебниками, но все они приводят к ошибкам.

У кого-нибудь есть рабочий пример этого драгоценного камня?

Answer 1

Укажите драгоценный камень, как зависимость в вашем Gemfile:

# Gemfile 

gem 'bootstrap-multiselect-rails' 

Требовать машинописный файлы в манифесте:

// app/assets/javascripts/application.js 

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

Javascript:

// app/assets/javascripts/models_controller.js 

// initialize bloodhound engine 
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); 
}); 

Вид:

<-- app/views/models/whatever.html.erb --> 

<input type="text" id="typeahead"> 

Маршруты:

# config/routes.rb 

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

Контроллер:

# app/controllers/models_controller.rb 

def typeahead 
    render json: Model.where(name: params[:query]) 
end 

## note: the above will only return exact matches. 
## depending on the database being used, 
## something else may be more appropriate. 
## here is an example for postgres 
## for case-insensitive partial matches: 

def typeahead 
    render json: Model.where('name ilike ?', "%#{params[:query]}%") 
end 

запрос GET к/машинописный /% QUERY возвращает JSON в виде:

[ 
    { 
    "name": "foo", 
    "id": "1" 
    }, 
    { 
    "name": "bar", 
    "id": "2" 
    } 
] 

Answer 2

Принятый ответ не полностью верный.

Там, кажется, 2 различных драгоценных камней делают примерно то же самое:

bootstrap-multiselect-rails в настоящее время на версии 0.9.9 в хранилище драгоценных камней и имеет различные активы требуют структуры, как указано в сообщении. активы этого драгоценного камня должны быть включены как:

In application.js: 
//= require bootstrap-multiselect 

In application.css: 
*= require bootstrap-multiselect 

Больше на Git: https://github.com/benjamincanac/bootstrap-multiselect-rails

С другой стороны, есть twitter-typeahead-rails драгоценный камень, в настоящее время на версии 0.11.1, которые, кажется, должны быть использованы и включены, как описано в остальном принятого ответа.

Больше на Git: https://github.com/yourabi/twitter-typeahead-rails

Оба драгоценных камней, кажется, последнее обновление около 5-6 месяцев назад на момент написания этого.

Наконец, удаленный URL, указанный в Bloodhound JS неправилен:

remote: '/typeahead/%QUERY' 

должна быть

remote: {url: '/typeahead/%QUERY', wildcard: '%QUERY'} 

Надеется, что это помогает кто-то