gpt4 book ai didi

jquery - Rails,让 Bootstrap 的 typeahead 能够与 Rails 和 jquery 一起使用(正常工作)

转载 作者:行者123 更新时间:2023-12-01 00:24:19 25 4
gpt4 key购买 nike

我想知道是否有人可以帮助我使用 Rails 和 jquery 自动完成 Bootstrap “typeahead”

在我的"new"操作模板中,我有...

        <div class="tags">
<%= f.label :tag_names, "Tags" %>
<%= f.text_field :tag_names,
data: { autocomplete_source: tags_path} %>
</div>

然后转到标签 Controller 的索引操作

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

自动完成功能可以工作,但是我似乎无法让它与 Twitter 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 提前输入(基本上将 Bootstrap CSS 应用于 jQuery UI 元素)。

我是如何做到的: http://criticalthinking.tumblr.com/post/17940560421/making-jquery-ui-look-like-bootstrap

关于jquery - Rails,让 Bootstrap 的 typeahead 能够与 Rails 和 jquery 一起使用(正常工作),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10307587/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com