我正在尝试实施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"
答案 0 :(得分:0)
尝试以下适合我的方式
$(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()
});
});
希望它对你有用。