レール、

Question

私を助けることができる誰かが私の「新しい」アクションテンプレートでレールとjqueryのオートコンプリート

で「先行入力」をブートストラップした場合、私は思っていた

、I私はその非常に思ういけないのに...その後、私のタグコントローラ

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 

、以下の私のindexアクションに行く

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

は、私の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のメッセージで動作するように見えることはできません。 私は私application.jsファイルに

data: { autocomplete_source: tags_path, provide: "typeahead"} %> 

と

$('.typeahead').typeahead() 

を提供しようとしました。それは動作していないようです。私のオートコンプリートが動作を停止し、id属性：私もそう私はしかし、私のフォーム与えることによって

$('#autocomplete').typeahead() 

ような何かを行うことができますし...

   <%= f.text_field :tag_names, id: "autocomplete", 
       data: { autocomplete_source: tags_path} %> 

id属性私のフォームを与えてみました。だから間違っているのは間違いない。それを行う他の方法はありますか？

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

Answer 1

私は同様の問題を抱えていて、ブートストラップの先読み（基本的にはjQuery UI要素にブートストラップCSSを適用する）のようにjQuery UIオートコンプリートのスタイリングを終了しました。私はそれをやった方法

： http://criticalthinking.tumblr.com/post/17940560421/making-jquery-ui-look-like-bootstrap