title: rails, getting bootstrap's typeahead to work with rails and jquery (which work normally)
body: <p>i was wondering if someone could help with me bootstraps "typeahead" with rails and jquery autocomplete</p>
  
  <p>in my 'new' action template, i have...</p>
  
  <pre><code>        &lt;div class="tags"&gt;
              &lt;%= f.label :tag_names, "Tags" %&gt;
              &lt;%= f.text_field :tag_names,
                  data: { autocomplete_source: tags_path} %&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>which then goes to my index action of my tags controller</p>
  
  <pre><code>    def index
         @tags = Tag.order(:name).where("name like ?", "%#{params[:term]}%")
         render json: @tags.map{ |tag| {:label =&gt; "#{tag.name} x #{tag.count}", :value =&gt; tag.name} }
      end
  </code></pre>
  
  <p>and below is my jquery ui autocomplete code, though i dont think its very necessary here...but here it is incase</p>
  
  <pre><code>  $(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 &amp;&amp; $(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 &lt; 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;
      }
    });
  });
  </code></pre>
  
  <p>the autocomplete works, however i can't seem to get it to work with twitters bootstrap.
  i tried providing</p>
  
  <pre><code>data: { autocomplete_source: tags_path, provide: "typeahead"} %&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('.typeahead').typeahead()
  </code></pre>
  
  <p>into my application.js file. but it doesn't seem to work. i also tried giving my form an id attribute with...</p>
  
  <pre><code>                &lt;%= f.text_field :tag_names, id: "autocomplete",
                  data: { autocomplete_source: tags_path} %&gt;
  </code></pre>
  
  <p>so i can do something like</p>
  
  <pre><code>    $('#autocomplete').typeahead()
  </code></pre>
  
  <p>however by giving my form an :id attribute, my autocomplete stops working. so...im not really sure what is wrong. are there other ways of doing it?</p>
  
  <p>help would be much appreciated. thanks</p>