Question

我正在尝试实施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：

<%= 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>

和javascript：

<script>
$(document).on('turbolinks:load', function(){
    var items = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/items/autocomplete?query=%QUERY',
            wildcard: '%QUERY'
        }
    });
    $('#items_search').typeahead(null, {
        source: items
    });
})
</script>

这是我的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

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

Parameters: {"query"=>"sam"} Item Search (6.1ms) curl http://localhost:9200/items_development/_search?pretty -H 'Content-Type: application/json' -d '{"size":10,"from":0,"query":{"dis_max":{"queries":[{"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_word_search"}}}}}]}},"timeout":"11s"}' Item Search (5.0ms) curl http://localhost:9200/items_development/_search?pretty -H 'Content-Type: application/json' -d '{"size":10,"from":0,"query":{"dis_max":{"queries":[{"bool":{"must":{"bool":{"should":[{"match":{"title.word_start":{"query":"sam","boost":50.0,"operator":"and","analyzer":"searchkick_word_search"}}},{"match":{"title.word_start":{"query":"sam","boost":5.0,"operator":"and","analyzer":"searchkick_word_search","fuzziness":1,"prefix_length":0,"max_expansions":20,"fuzzy_transpositions":true}}}]}},"should":{"match":{"title.analyzed":{"query":"sam","boost":50.0,"operator":"and","analyzer":"searchkick_word_search"}}}}}]}},"timeout":"11s"}' Completed 200 OK in 14ms (Views: 0.4ms | Searchkick: 11.1ms | ActiveRecord: 0.0ms)

但是当我在text_field_tag内输入时，自动填充功能未显示。浏览器控制台内也没有出现错误！

我在这里做错了什么想法？

更新1

我将text_field_tag更改为class to typeahead，现在出现了下拉菜单，但它是空白的！

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

Answer 1

尝试以下适合我的方式

$(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()
    });
});

希望它对你有用。

Rails5：typeahead.js自动完成

1 个答案: