[英]Typeahead Bloodhound Rails with pg_search
我正在使用這個stackoverflow 答案來嘗試為我的rails應用程序實現Twitter Typeahead,並且我還嘗試了實現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
資產/ javascript中的pages_controller.js
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 %>
經過一段時間的故障排除后,這些設置可使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 %>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.