如何插入“自定义”选项；“未找到邮件”；在Rails中使用Javascript实现我的搜索功能？

我已经能够在Rails中使用AJAX实现搜索功能，但是当用户在搜索查询中键入内容但没有找到任何内容时，结果当前不会显示任何内容。与此相反，我希望显示一条消息，例如：“抱歉，未找到任何内容！”，但我似乎没法让它发挥作用

这是我在

index.js.erb

文件中的代码：

$('#products').append('<%= escape_javascript render(@products) %>');
$('.pagination').replaceWith('<%= escape_javascript paginate(@products) %>');

<%= form_tag products_path, method: :get, authentication: false, id: 'search-form' do %>

    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search" %>

<% end %>

<div class="small-block-grid-2 medium-block-grid-3 large-block-grid-3" id="products">
    <% @products.each do |product| %>
      <%= render product %>
    <% end %>
</div>

respond_to :html, :js, :json

def index
    @products = if params[:search].present?
      Product.where("name LIKE ?", "%#{params[:search]}%")
    else
      Product.all
    end

    @products = Product.order(created_at: :desc).page(params[:page]).per(13)

    respond_with @products
  end

  def search
    @products = Product.where("name LIKE ?", "%#{params[:search]}%")
    render @products
  end

$(document).ready(function(){
    $('#search-form').submit(function(event){
        event.preventDefault();
        var searchValue = $('#search').val();

        $.get('/products/search?search='+searchValue)
            .done(function(data){
            console.log(data);
            if ($("#products").children().length != 0){
                $('#products').html(data);
            }else{
                $('#products').html("<h3>Sorry nothing was found!</h3>");
            }
        });
    });
});

最后，这是我的

products\u controller.rb

文件中的相关代码位：

$('#products').append('<%= escape_javascript render(@products) %>');
$('.pagination').replaceWith('<%= escape_javascript paginate(@products) %>');

<%= form_tag products_path, method: :get, authentication: false, id: 'search-form' do %>

    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search" %>

<% end %>

<div class="small-block-grid-2 medium-block-grid-3 large-block-grid-3" id="products">
    <% @products.each do |product| %>
      <%= render product %>
    <% end %>
</div>

respond_to :html, :js, :json

def index
    @products = if params[:search].present?
      Product.where("name LIKE ?", "%#{params[:search]}%")
    else
      Product.all
    end

    @products = Product.order(created_at: :desc).page(params[:page]).per(13)

    respond_with @products
  end

  def search
    @products = Product.where("name LIKE ?", "%#{params[:search]}%")
    render @products
  end

$(document).ready(function(){
    $('#search-form').submit(function(event){
        event.preventDefault();
        var searchValue = $('#search').val();

        $.get('/products/search?search='+searchValue)
            .done(function(data){
            console.log(data);
            if ($("#products").children().length != 0){
                $('#products').html(data);
            }else{
                $('#products').html("<h3>Sorry nothing was found!</h3>");
            }
        });
    });
});

对不起，我应该把这个也包括在问题里。现在，我可以在搜索查询没有结果时显示“抱歉，没有找到任何东西！”消息，但问题是我必须按两次enter键才能显示消息。我可以做些什么来更改我的代码，以便在第一次未找到任何内容时显示：“对不起，未找到任何内容！”

这是我的

assets/javascripts/products.js

文件中的代码：

$('#products').append('<%= escape_javascript render(@products) %>');
$('.pagination').replaceWith('<%= escape_javascript paginate(@products) %>');

<%= form_tag products_path, method: :get, authentication: false, id: 'search-form' do %>

    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search" %>

<% end %>

<div class="small-block-grid-2 medium-block-grid-3 large-block-grid-3" id="products">
    <% @products.each do |product| %>
      <%= render product %>
    <% end %>
</div>

respond_to :html, :js, :json

def index
    @products = if params[:search].present?
      Product.where("name LIKE ?", "%#{params[:search]}%")
    else
      Product.all
    end

    @products = Product.order(created_at: :desc).page(params[:page]).per(13)

    respond_with @products
  end

  def search
    @products = Product.where("name LIKE ?", "%#{params[:search]}%")
    render @products
  end

$(document).ready(function(){
    $('#search-form').submit(function(event){
        event.preventDefault();
        var searchValue = $('#search').val();

        $.get('/products/search?search='+searchValue)
            .done(function(data){
            console.log(data);
            if ($("#products").children().length != 0){
                $('#products').html(data);
            }else{
                $('#products').html("<h3>Sorry nothing was found!</h3>");
            }
        });
    });
});

$（文档）.ready（函数（）{
$（“#搜索表单”）.submit（函数（事件）{
event.preventDefault（）；
var searchValue=$（'#search'）.val（）；
$.get（'/products/search？search='+searchValue）
.完成（功能（数据）{
控制台日志（数据）；
if（$（“#产品”）.children（）.length！=0）{
$（#products'）.html（数据）；
}否则{
$（“#products”）.html（“对不起，没有找到任何东西！”）；
}
});
});
});

我相信这就是理解这个问题所需要的所有必要信息。如果您需要更多的澄清，以了解我在做什么，我很乐意提供

---

谢谢大家的意见

您可以在

索引

操作中两次分配

@products

，第二次覆盖搜索的所有内容吗？也许你想要

@products=@products.order（created_at:：desc）.page（params[：page]）.per（13）

？我更改了上面的代码，以便更清楚地了解@products变量是什么，但我认为我遇到的问题可能与我的index.js.erb文件没有正确运行Javascript有关。你还有什么其他建议吗？你说的“我似乎不能让它工作”是什么意思？您可以向我们展示Ajax响应吗？您所做的更改没有改变您以任何方式覆盖

@products

的事实，请尝试直接在浏览器中检查index.js输出