4

レールとjqueryオートコンプリートを使用したブートストラップ「typehead」を誰かが手伝ってくれるかどうか疑問に思っていました

私の「新しい」アクションテンプレートには...

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

オートコンプリートは機能しますが、Twitter のブートストラップでは機能しないようです。提供してみた

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 属性を指定すると、オートコンプリートが機能しなくなります。だから...何が間違っているのかよくわかりません。それを行う他の方法はありますか？

助けていただければ幸いです。ありがとう

4

1 に答える 1

2

同様の問題が発生し、ブートストラップの先行入力のようにjQuery UIオートコンプリートのスタイルを設定することになりました（基本的にブートストラップCSSをjQuery UI要素に適用します）。

私のやり方：http： //criticalthinking.tumblr.com/post/17940560421/making-jquery-ui-look-like-bootstrap

于 2012-04-25T09:07:00.183 に答える