Rails, Bootstraps Typeahead mit Rails und Jquery (die normal funktionieren) zum Laufen bringen

Question

Ich habe mich gefragt, ob jemand mit mir Bootstraps "Typeahead" mit Schienen und Jquery Autocomplete helfen könnte

In meiner "neuen" Aktionsvorlage habe ich...

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

die dann zu meiner Index-Aktion meines Tags-Controllers führt

    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

und unten ist meine Jquery Ui Autocomplete-Code, obwohl ich nicht denke, seine sehr notwendig hier... aber hier ist es incase

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

die Autovervollständigung funktioniert, aber ich kann nicht scheinen, um es zu bekommen, um mit Twitters Bootstrap arbeiten. Ich habe versucht, Bereitstellung

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

と

$('.typeahead').typeahead()

in meine application.js-Datei. aber es scheint nicht zu funktionieren. ich habe auch versucht, mein Formular ein id-Attribut mit...

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

Ich kann also etwas tun wie

    $('#autocomplete').typeahead()

jedoch, indem Sie mein Formular ein :id-Attribut, meine Autocomplete stoppt arbeiten. so... im nicht wirklich sicher, was falsch ist. gibt es andere Möglichkeiten, es zu tun?

Hilfe wäre sehr willkommen. Danke

Answer 1

Ich hatte ein ähnliches Problem und endete Styling der jQuery UI autocomplete wie die Bootstrap typeahead (im Grunde Anwendung Bootstrap CSS zu jQuery UI-Elemente).

Wie ich es gemacht habe: http://criticalthinking.tumblr.com/post/17940560421/making-jquery-ui-look-like-bootstrap