我想知道是否有人可以帮助我使用rails和 jquery自动完成程序“typeahead” 在我的“新”动作模板中,我有…… div class="tags" %= f.label :tag_names, "Tags" % %= f.text_field :tag_names, data: { autocomplete_s
在我的“新”动作模板中,我有……
<div class="tags">
<%= f.label :tag_names, "Tags" %>
<%= f.text_field :tag_names,
data: { autocomplete_source: tags_path} %>
</div>
然后转到我的标签控制器的索引操作
def index
@tags = Tag.order(:name).where("name like ?", "%#{params[:term]}%")
render json: @tags.map{ |tag| {:label => "#{tag.name} x #{tag.count}", :value => tag.name} }
end
以下是我的jquery ui自动完成代码,虽然我不认为它在这里非常必要……但这里是它
$(function() {
var extractLast, split;
split = function(val) {
return val.split(/,\s*/);
};
extractLast = function(term) {
return split(term).pop();
};
return $("#lesson_tag_names").bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
return event.preventDefault();
}
}).autocomplete({
source: function(request, response) {
return $.getJSON($("#lesson_tag_names").data("autocomplete-source"), {
term: extractLast(request.term)
}, response);
},
search: function() {
var term;
term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus: function() {
return false;
},
select: function(event, ui) {
var terms;
terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
自动完成工作,但我似乎无法使用twitters bootstrap.
我试过提供
data: { autocomplete_source: tags_path, provide: "typeahead"} %>
和
$('.typeahead').typeahead()
进入我的application.js文件.但它似乎没有用.我也尝试给我的表单一个id属性…
<%= f.text_field :tag_names, id: "autocomplete",
data: { autocomplete_source: tags_path} %>
所以我可以做点什么
$('#autocomplete').typeahead()
但是通过给我的表单一个:id属性,我的自动完成功能停止工作.所以……我不确定是什么问题.有其他方法吗?
帮助将不胜感激.谢谢
我遇到了类似的问题,并最终设计了jQuery UI自动完成功能,如bootstrap typeahead(基本上将bootstrap CSS应用于jQuery UI元素).我是怎么做到的
http://criticalthinking.tumblr.com/post/17940560421/making-jquery-ui-look-like-bootstrap
