加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

rails,获取bootstrap的typeahead以使用rails和jquery(正常工作)

发布时间:2020-12-17 21:25:25 所属栏目:安全 来源:网络整理
导读:我想知道是否有人可以帮助我使用rails和 jquery自动完成程序“typeahead” 在我的“新”动作模板中,我有…… div class="tags" %= f.label :tag_names,"Tags" % %= f.text_field :tag_names,data: { autocomplete_source: tags_path} % /div 然后转到我的标
我想知道是否有人可以帮助我使用rails和 jquery自动完成程序“typeahead”

在我的“新”动作模板中,我有……

<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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读