Ruby on rails Rails5:typeahead.js自动完成

我正在尝试实现

typeahead.js

，这是我的设置：

控制器操作：

 def autocomplete
    render json: Item.search(params[:query], {
      fields: ["title^5"],
      match: :word_start,
      limit: 10,
      load: false,
      misspellings: {below: 5}
    }).map(&:title)
  end

application.js

//= require typeahead.bundle

我的路线是：

get 'items/autocomplete' => 'search#autocomplete', :as => :autocomplete_search

表单标签

我有：

<%= form_tag search_path, :method => "get", id: "search-form" do %>
 <div class="input-group">
  <%= text_field_tag :search, params[:search], autofocus: true,
                 class: "search_size",  id:"items_search" %>
  <span class="input-group-btn">
 <%= submit_tag t("search_submit"), class: "btn btn-custom" %>
   </span>
<%end%>
</div>

这就是我的sass风格：

span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu
position: absolute
top: 100%
left: 0
z-index: 1000
display: none
float: left
min-width: 160px
padding: 5px 0
margin: 2px 0 0
list-style: none
font-size: 14px
text-align: left
background-color: #ffffff
border: 1px solid #cccccc
border: 1px solid rgba(0, 0, 0, 0.15)
border-radius: 4px
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
background-clip: padding-box

span.twitter-typeahead .tt-suggestion
display: block
padding: 3px 20px
clear: both
font-weight: normal
line-height: 1.42857143
color: #333333
white-space: nowrap

span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus
color: #ffffff
text-decoration: none
outline: 0
background-color: #337ab7

.input-group.input-group-lg span.twitter-typeahead .form-control
height: 46px
padding: 10px 16px
font-size: 18px
line-height: 1.3333333
border-radius: 6px

.input-group.input-group-sm span.twitter-typeahead .form-control
height: 30px
padding: 5px 10px
font-size: 12px
line-height: 1.5
border-radius: 3px

span.twitter-typeahead
width: 100%

.input-group span.twitter-typeahead
display: block !important
height: 34px

.input-group span.twitter-typeahead .tt-menu,
.input-group span.twitter-typeahead .tt-dropdown-menu
top: 32px !important

.input-group span.twitter-typeahead:not(:first-child):not(:last-child)
.form-control
border-radius: 0

.input-group span.twitter-typeahead:first-child .form-control
border-top-left-radius: 4px
border-bottom-left-radius: 4px
border-top-right-radius: 0
border-bottom-right-radius: 0

.input-group span.twitter-typeahead:last-child .form-control
border-top-left-radius: 0
border-bottom-left-radius: 0
border-top-right-radius: 4px
border-bottom-right-radius: 4px

.input-group.input-group-sm span.twitter-typeahead
height: 30px

.input-group.input-group-sm span.twitter-typeahead .tt-menu,
.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu
top: 30px !important

.input-group.input-group-lg span.twitter-typeahead
height: 46px

.input-group.input-group-lg span.twitter-typeahead .tt-menu,
.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu
top: 46px !important

它似乎在控制台内部工作，因为它返回以下内容：

参数：{“query”=>“sam”}
项目搜索（6.1ms）卷曲http://localhost:9200/items_development/_search?pretty -内容类型：application/json'-d'{“size”：10，“from”：0，“query”：{“dis_max”：{“querys”：{“bool”：{“must”：{“bool”：{“should”：{“match”：{“title.word_start”：{“query”：“sam”、“boost”：50.0，“operator”：“and”，“analyzer”：“searchkick_word_search”}}}}，“should”：{“match”：{“title.analyzed”：{“query”：“sam”，“boost”：50.0，“operator”：“and”，“analyzer”：“searchkick\u word\u search”}}]}}，“timeout”：“11s”}”
项目搜索（5.0ms）卷曲http://localhost:9200/items_development/_search?pretty -内容类型：application/json'-d'{“size”：10，“from”：0，“query”：{“dis_max”：{“querys”：{“bool”：{“must”：{“bool”：{“should”：{“match”：{“title.word_start”：{“query”：“sam”、“boost”：50.0，“operator”：“and”，“analyzer”：“searchkick_word_search”}，{“match”：{“title.word u start”：{“查询”：“sam”，“boost”：5.0，“运算符”：“and”，“分析器”：“searchkick_-word_-search”，“fuzzness”：1，“prefix_-length”：0，“max_-expansions”：20，“fuzzy_-transpositions”：true}}}}}}}}}}}}，“应该”：{“匹配”：{“title.analysisted”：{“查询”：“sam”，“boost”：50.0，“运算符”：“and”，“分析器”：“searchkick_-word search}}}}}}}}}}}}}}}}}}}}}，“超时”：“11s}”
在14毫秒内完成200 OK（视图：0.4毫秒| Searchkick：11.1毫秒| ActiveRecord：0.0毫秒）

但是当我在

text\u field\u标记中键入时，不会显示自动完成。浏览器控制台中也不会出现错误

你知道我可能做错了什么吗

更新1

我把
text\u field\u标签
改为
class改为typeahead
，现在下拉菜单出现了，但它是空的

<%= text_field_tag :search, params[:search], autofocus: true, autocomplete: :off,
                 class: "typeahead"

尝试以下适合我的方法

$(document).on('turbolinks:load', function(){
    var engine = new Bloodhound({
        datumTokenizer: function(d) {
            console.log(d);
            return Bloodhound.tokenizers.whitespace(d.items);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '../items/autocomplete?q=%QUERY',
            wildcard: '%QUERY'
        }
    });

    var promise = engine.initialize();

    promise
        .done(function() { console.log('success!'); })
        .fail(function() { console.log('err!'); });

    $('#items_search').typeahead(null, {
        name: 'engine',
        displayKey: 'column_name', // It will be property_name which you need to show likr title
        source: engine.ttAdapter()
    });
});

希望它对你有用

$(document).on('turbolinks:load', function(){
    var engine = new Bloodhound({
        datumTokenizer: function(d) {
            console.log(d);
            return Bloodhound.tokenizers.whitespace(d.items);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '../items/autocomplete?q=%QUERY',
            wildcard: '%QUERY'
        }
    });

    var promise = engine.initialize();

    promise
        .done(function() { console.log('success!'); })
        .fail(function() { console.log('err!'); });

    $('#items_search').typeahead(null, {
        name: 'engine',
        displayKey: 'column_name', // It will be property_name which you need to show likr title
        source: engine.ttAdapter()
    });
});