Question

目前我在我的应用程序中使用pg搜索gem。搜索功能正常。但是，现在我想为我的表单应用ajax。问题是在我输入搜索查询后，表单根本没有显示任何结果。我不知道我哪里弄错了。你们能不能真实地看看我的代码：

search.haml ：

.row
  %h1.text-center Tìm Giảng Viên
  #teacher_lookup
    = form_tag search_teachers_path, :id => 'custom-search-input', method: :get, class: "input-group col-md-12", role: "search", remote: true do
      .input-group
        = text_field_tag :search,
              params[:search], class: "search-query form-control", placeholder: "Tên giảng viên, ví dụ: Nguyễn Văn A"
        %span.input-group-btn
          = button_tag( :class => "btn btn-danger") do
            .search-size
              %span.glyphicon.glyphicon-search

= @teachers.each do |teacher|
  = link_to teacher, school_teacher_url(teacher.school_id, teacher)
  Khoa
  = teacher.department |
  ,
  = link_to teacher.school.name, school_path(teacher.school_id)
  %br/

teachers.js ：

var search_teacher;
search_teacher = function () {
   $('#custom-search-input') .on('ajax:success', function (event, data, status) {
      $('#teacher_lookup').replaceWith(data);
      search_teacher();
   });
}

$(document).ready(function () {
  search_teacher();
});

Answer 1

更好的尝试： - 构建一个API，它接受一个搜索参数并以JSON格式返回教师。 - 构建一个JS函数，该函数使用$ .getJSON调用此API - 在getJSON回调中，您可以将教师附加到HTML

您仍然可以使用表单，但必须使用自定义查询覆盖提交功能。

其他可能性：使用标准的rails ajax并在views / * / search_teachers.js.erb中做你的东西

以下是一些没有rails内置视图的代码片段。从我们目前的一个项目中被盗：

我们需要一些东西： - 铁路线 - 一个rails控制器，它以json格式进行搜索查询（以你想要的任何方式）和响应 - 在你的前端，我们在某个地方有一个带有按钮的HTML表单，触发了一个“负载”。功能 - “负载”＃39;函数进行ajax调用并重新呈现列表

# routes.rb
get '/my_search_route', to: 'search#query', as: :search_query

然后rails控制器处理路径

#app/controllers/search_controller.rb
class SearchController < ApplicationController

  # method to search after something (e.g. a model named 'Customer')
  def query
    if !params[:q].nil?
      render :json => Customer.where("name ilike :q", q: "#{params[:q]}%") # put this logic into your model
    else
      render :json => [] # not absulutly sure if this is correct syntax
    end
  end
end

在你的某些erb文件的前端，你有你的表格。我用一个输入字段做一个简单的例子来说清楚：

<!-- app/views/whatever/some_file.html.erb -->
<!-- Input field to search --> 
<input type="search" name="search" id="search" placeholder="Search..." />

<!-- HTML list to display your results --> 
<ul id="searchResults"></ul>

<!-- Skript to call the 'load'-function, when user types something --> 
<script>
  $('#search').keyup(function(){
    query = $('#search').val();
    loadData(query);
  });
</script>

在您的资产中，您需要一个包含在资产管道中的javascript文件，我们可以在其中存储加载函数。

// app/assets/javascripts/search_functionality.js
// loadData calls the backend
function loadData(query){
  var params = {};
  params['q'] = query;

  // ajax call
  $.get("/my_search_route", params ).done(function( data ) {
    for (var i = 0; i < data.length; i++) {
       $("#searchResults").append('<li>' + data[i].name + '</li>');
    }
   });
}

这只是如何进行往返的一个例子。在我们的项目中，我们在这些内容中有更多的逻辑，但我认为主要部分应该是清楚的。某处有一些html和js。使用js，您可以对服务器进行ajax调用以获取数据。服务器需要一个路径和控制器，在给定的参数后搜索。如果您遇到问题，请在javascript中使用console.log或在rails侧使用/ debugger

Rails Ajax表单没有响应

1 个答案: