Ruby On Rails：如何根據ajax請求從數據庫檢索數據

Question

我有一個表單，在輸入字段中鍵入內容時，我需要從categorys表中獲取包含該關鍵字的所有類別。

我有兩個控制器，即。 書籍和類別。

主要目的是添加一本書並選擇一個類別。

我需要使用ajax來執行此操作。

我已經嘗試了很多。 但是它們都不起作用。

我已經包括了jquery和所有需要的腳本。 但仍然顯示出來。

有人可以幫我嗎？

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

Answer 1

有許多實現自動完成功能的庫，包括2種最流行的，自動完成功能和預輸入類型。

但是，顯然每個庫都是額外的開銷，因此如果您想自己實現它，當然可以。

要考慮的一些事情：

1. 請求的URL-鑒於在這種情況下，您無需關心所有書籍，而實際上只想要一個所有可能匹配類別的列表，最好調用一個類別控制器並將代碼相應地放在那里。
2. 您將需要返回一個列表，以便用戶可以選擇，但是您不需要將該列表傳遞給控制器​​，因此category_id的隱藏字段是一個好主意，這樣您就可以忽略所有已過濾強參數的內容出去，只保留好東西。
3. jBuilder是您的朋友。 它使您可以根據需要布局JSON，而不會使控制器蒙上陰影。 在這種情況下，這不是絕對必要的，因為您只需要一個label字段和一個id字段，但是我會把它放在一個很好的位置。
4. 由於您在標准控制器調用中使用@categories ，因此我會猶豫使用相同的實例變量返回搜索結果，因此我將其命名為不同的名稱。
5. 就我所知，您在原始示例中具有的下拉框是不必要的，因為無序列表與更少的代碼一樣好。

鑒於此，您可以在視圖（窗體）中執行類似的操作

視圖

<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>

包括簡單的CSS，可以很好地解決問題。

Java腳本

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

在此JS中，實際上沒有任何魔術，只是簡單的jQuery。 您可以抓住用戶輸入並以用戶輸入作為查詢來調用url，如果返回了查詢，則刪除任何先前的顯示列表，然后為用戶建立一個顯示列表（ul），並顯示所有可能的結果。 單擊您選擇的結果會做兩件事，a。）從我們從結果集中注入的數據屬性中添加id，b。）清除用戶鍵入的輸入字段，並將其替換為所選結果的全名。

控制者

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

路線

resources categories do
    collection do
        get :search
    end
end