Ruby On Rails : Wie abrufen von Daten aus der Datenbank, ajax-Anfrage

Ich habe ein Formular, und während der Eingabe in das input-Feld, das ich brauchen, um alle Kategorien
die das Schlüsselwort enthält die aus der Tabelle Kategorien .

Ich habe zwei Controller viz. Bücher und Kategorien.

Oberstes Ziel ist es, ein Buch hinzuzufügen, und wählen Sie eine Kategorie.

Muss ich dies mit ajax.

Ich habe versucht, eine Menge. Aber keiner von Ihnen arbeitet.

Ich habe jquery und alle benötigten scripts. Aber dennoch zeigen.

Jemand kann mir helfen mit diesem?

JQUERY

$('#book_search').keyup(function(){

                $.ajax({
                    type:"GET",
                    url:"books/new",
                    dataType:"json",
                    data: {keyword: '$("input[name'search']").val()},
                    success:function(result){
                        alert(result);
                    }
                })
            })

HTML

<%= simple_form_for :book, url: books_path do |f| %>
                <p> <%= f.label :name %> <%= f.text_field :name %> </p>
                <p> <%= f.input :category, collection: @categories, prompt: "Select Category" %></p>
                <p> <%= f.label :search %> <%= f.text_field :search %> </p>
                <p> <%= f.submit %></p>
            <% end %>



class BooksController < ApplicationController
    def index
        @books = Book.all
        @categories = Category.all
    end
    def new
        @categories = Category.all
    end

    def create
        @book = Book.new(book_params)        
        @book.save
        redirect_to @book
    end

    def show
        @book = Book.find(params[:id])
        @categories = Category.all
    end

    def show_categories
        @category = Category.find(params[:id])
    end

    private
        def book_params
            params.require(:book).permit(:name, :category)
        end
end
InformationsquelleAutor Mad Angle | 2016-01-05



One Reply
  1. 3

    Gibt es viele Bibliotheken, die zur Umsetzung von auto-vervollständigen, einschließlich die 2 beliebtesten“, „AutoVervollständigen“ und „type-ahead“.

    Jedoch offensichtlich in jeder Bibliothek ist der Mehraufwand also, wenn Sie wollen, um es selbst implementieren, Sie kann sicherlich.

    Einige Dinge zu beachten:

    1. Die URL der Anfrage — gegeben, dass in diesem Fall Sie don ‚ T care über die Bücher, und Sie wirklich wollen einfach nur eine Liste aller potentiell passenden Kategorien bestes zu rufen, um ein Kategorien-Steuerung und legen Sie dort Ihren code entsprechend.
    2. Sie wollen wieder eine Liste, damit Benutzer wählen können, aber Sie brauchen nicht zu gehen, dass die Liste der controller, also ein verstecktes Feld für die kategorie_id ist eine gute Idee, auf diese Weise können Sie ignorieren alles, was stark params bereits filtert und halten nur die guten Sachen.
    3. jBuilder ist dein Freund. Es lässt Sie das Layout für JSON wie man will, ohne Trübung Ihre Controller. In diesem Fall ist es nicht unbedingt notwendig, weil alles, was Sie brauchen, ist ein label-Feld und ein id-Feld, aber ich werde werfen Sie es in für eine gute Maßnahme.
    4. Da Sie über @categories in Ihren standard-controller nennen, ich wäre zögerlich, verwenden Sie die gleiche Instanz-variable zurück zu Ihren Suchergebnissen, so nannte ich es anders.
    5. Der drop-down-box, die Sie in Ihrem ursprünglichen Beispiel ist unnötig, denn soweit ich es sehe, weil eine ungeordnete Liste ist nur so gut, mit weniger code.

    Gegeben, dass Sie etwas tun könnte, wie dies in der Ansicht (form)

    Ansicht

    <div id="book_create">
        <%= simple_form_for :book, url: books_path do |f|  %>
            <%= f.input :name  %>
            <%= f.input :category_id, as: :hidden %>
            <%= f.input :category_search, as: :string, input_html: {class: "book_search"} , autocomplete: false %>
            <div id="cat_search"></div>
            <%= f.submit %>
        <% end %>
    </div>
    <style>
        #categories { width: 200px; max-height: 220px; overflow: scroll; box-shadow: 1px 1px 4px rgba(158, 158, 158, 0.43); list-style: none; padding: 0; }
        #categories li:nth-of-type(odd) { background-color: rgb(238, 247, 255); }
        #categories li { cursor: pointer; }
    </style>

    Einfache css enthalten, für eine gute Maßnahme.

    Javascript

    $('.book_search').keyup(function(){
        var q = $(this).val();
        $.ajax({
            type: "GET",
            url: "/categories/search",
            dataType: "json",
            data: {'keyword': q},
            success: function(result){
                $("#categories").remove();
                $("#cat_search").after('<ul id="categories"></ul>');
                render = true;
                $("#categories").on("click", "li", function(){
                    $("#book_category_id").val($(this).data('id'));
                    $(".book_search").val($(this).text());
                    $("#categories").remove();
                });
                for(term in result){
                    render = false;
                    $("#categories").append("<li data-id="+result[term].id+">" + result[term].keyword + "</li>");
                }
            }
        })
    });

    Gibt es wirklich keine rails-Magie in diesem JS, es ist nur einfach jQuery. Sie greifen den Benutzer-Eingang und einen Aufruf einer url mit der Eingabe des Benutzers die Abfrage, wenn die Abfrage zurückgegeben wird, entfernen Sie alle vorherigen display-Liste erstellen Sie dann eine Anzeige einer Liste (ul) für den user mit allen möglichen Ergebnissen. Klicken Sie auf das Ergebnis Ihrer Wahl noch 2 Dinge ein.) fügt die id aus dem data-Attribut injiziert wir aus dem ResultSet und b.) löscht das input-Feld der Benutzer eingegeben in zu ersetzen mit dem vollständigen Namen der von Ihnen gewählten Ergebnis.

    Controller

    class CategoriesController < ApplicationController
        before_action :set_category, only: [:show, :edit, :update, :destroy]
        respond_to :json, :html
        def search
            @cat_search_results = Category.where("keyword LIKE LOWER(?)", "%#{params[:keyword].downcase}%")
            respond_with(@cat_search_results, :include => :status)
        end
    end

    Jbuilder

    #/categories/search.json.jbuilder
    json.array!(@cat_search_results) do |category|
        json.extract! category, :id, :keyword
    end

    Routen

    resources categories do
        collection do
            get :search
        end
    end
    • Oh Mann!!!… Du bist der Superman!!! Es funktioniert unglaublich. Noch einmal vielen Dank.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.